javascript - 当半透明 div 覆盖另一个 div 时，CSS 移除悬停效果

Question

我有几个具有悬停效果的底层 div。有时我需要显示模态对话框并且所有未延迟的 div 都应该被“禁用”。这是通过将半透明的高 z-index div 放在它们上面来完成的，但问题是悬停效果对底层 div 的影响一直存在，直到我移动鼠标。当覆盖半透明的 div 变得可见时，有没有办法“取消悬停”底层 div？

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);

将鼠标悬停在正方形上并等待 5 秒钟。

Answer 1

它应该可以工作:http://jsfiddle.net/rjLhj/

当您打开一个模式(在 JS 中)时，只需将一个类添加到您的 .somediv(例如“.no-hover”)。在 CSS 中，将 .somediv:hover 更改为 .somediv:not(.no-hover):hover。

我不知道兼容性...所以，你应该测试 :P

JS:

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

CSS:

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

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

它适用于 IE9+、FF3.5+ 和 Safari3.1+...但是您可以使用属性选择器来达到相同的结果。

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);

或者更好的是，向您的 somediv 添加一个类(例如“hashover”)，在模式打开时将其删除并像这样定义您的 css:

.somediv.hashover:hover {...}