javascript - CSS Hover being de-activated -

javascript - CSS Hover being de-activated -

i displaying page of thumbnails, if hover on them, description displayed.

for using span element css

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

this works fine initially.

but needs work on touch device , touch not have hover, added button show descriptions.

this works fine, 1 time have used button toggle, description javascript function has somehow disabled css hover , 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

that javascript code adds css style attribute on element. example:

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

style attributes take priority on css files. alter this, modify css script this:

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

this code means display css used, rather attribute.

also, missing semicolons.

hope helps.

alternatives:

toggle class

$(".buttoncaption").toogleclass("showcap") .thumb:hover .thumbtext, .showcap { display: inline-block; }

set display nothing, rather none. assumes captions have display:none default in css. other 2 solutions improve this. $('.thumbtext').css("display", "");

javascript jquery css hover