Question

我有几个带有悬停效果的底层div。有时候我需要显示模态对话框，并且所有不公开的div应该是＆＃34;禁用＆＃34;。这是通过在它们上面放置半透明的高z-index div来完成的，但问题是在我移动鼠标之前，对底层div的悬停效果会保持不变。有没有办法去除＆＃34; unhover＆＃34;当覆盖半透明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中添加一个类（例如，＆＃39; .no-hover＆＃39;）。在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中添加一个类（例如＆＃39; hashover＆＃39;），在模态打开时删除它并像这样定义你的css：

.somediv.hashover:hover {...}

Answer 2

不幸的是，在鼠标移动之前，浏览器不会接收鼠标事件......

处理此问题的最佳方法是创建一个覆盖悬停行为的新类，并在显示模态的同时应用它。

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

2 个答案: