CODEWITHSUNDEEP
javascriptjqueryhtmlcss
rmflow
rmflow

Reputation: 4765

CSS remove hover effect when semi-transparent div overlays another div

I have several underlaying divs with hover effect. Sometimes I need to show modal dialog and all undelaying divs should be "disabled". This is done by placing semi-transparent high z-index div on top of them, but the problem is that hover effect on underlaying div stays until I move my mouse. Is there a way to "unhover" underlaying divs when overlaying semi-transparent div becomes visible?

Simplified exanple

HTML:

<div class="somediv"></div>
<div id="modal"></div>

CSS:

#modal {
    z-index: 1000;
    background:#000; 
    position:fixed; 
    top:0; left:0; 
    width:100%; 
    height:100%;
    display: none;
    opacity: 0.3;
}

.somediv {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 100px;
    height: 100px;
    background-color: red;
}

.somediv:hover {
    background-color: blue;
}

JS:

setTimeout(function(){
    $("#modal").show();
}, 5000);

Hover over square and wait 5 seconds.

Upvotes: 3

Views: 2761

Answers (2)

Douglas Zanotta
Douglas Zanotta

Reputation: 62

It should work: http://jsfiddle.net/rjLhj/

When you open a modal (in JS), just add a class to your .somediv ('.no-hover', for example). In CSS, change your .somediv:hover to .somediv:not(.no-hover):hover.

I don't know about compatibility... So, you should test :P

JS:

setTimeout(function(){
    $("#modal").show();
    $('.somediv').addClass('no-hover')
}, 2000);

CSS:

.somediv:not(.no-hover):hover {
    background-color: blue;
}

Update: http://caniuse.com/#feat=css-sel3

It works on IE9+, FF3.5+ and Safari3.1+... But you can use Attribute Selectors for reach the same result.

HTML:

<div class="somediv" data-nohover="0"></div>
<div id="modal"></div>

CSS:

.somediv[data-nohover="0"]:hover {
    background-color: blue;
}

JS:

setTimeout(function(){
    $("#modal").show();
    $('.somediv').attr('data-nohover','1')
}, 2000);

Or better, add one class to your somediv ('hashover', for example), remove it on modal open and define your css like this:

.somediv.hashover:hover {...}

Upvotes: 4

Jivings
Jivings

Reputation: 23250

Unfortunately the browser wont pick up mouse events until the mouse is moved...

The best way to deal with this is to create a new class that overrides the hover behaviour and apply this at the same time as you show the modal.

Upvotes: 0

Related Questions