CSS Hover being de-activated

Question

I am displaying a page of thumbnails, which if you hover over them, their description is displayed.

for this I am using a span element with CSS

.thumb:hover .thumbText {
    display: inline-block ;
}

This works fine initially.

But as this needs to work on a touch device and touch does not have hover, I added a button to show all descriptions.

This also works fine, but once I have used the Button Toggle, Description my javascript function has somehow disabled the CSS hover and I can not work out why.

var CaptionsOff = true;
function toggleCaptions() {
    if (CaptionsOff) {
        /* Turn Captions ON */
        $('.thumbText').css("display", "inline-block")
        $("#btnCaption").html("Hide Thumb Captions");
        CaptionsOff = false;
    } else {
        /* Turn Captions OFF */
        $('.thumbText').css("display", "none")
        $("#btnCaption").html("Show Thumb Captions");
        CaptionsOff = true;
    }

The site is

http://mclportal.net/wcit/June26.html

Answer 1

That Javascript code adds the CSS to a style attribute on the element. For example:

<span style="display:none">Caption</span>

Style attributes take priority over CSS files. To change this, modify your CSS script like this:

.thumb:hover .thumbText {
    display: inline-block !important;
}

This code means that the display from the CSS is used, rather than from the attribute.

Also, you are missing semicolons.

Hope this helps.

Alternatives:

Toggle a class

$(".buttonCaption").toogleClass("showCap")

.thumb:hover .thumbText, .showCap {
    display: inline-block;
}

Set the display to nothing, rather than none. Assumes that the captions are have display:none as default in CSS. Other two solutions are probably better than this. $('.thumbText').css("display", "");