我正在尝试突出显示页面的其余部分的 div / 灰色。我的代码是:
jQuery(document).ready(function ($) {
$('.entry-content').mouseover(function(e) {
$('.expose').mouseover(function(e){
$(this).css('z-index','99999');
$('#overlay').fadeIn(300);
});
});
$('.entry-content').mouseleave(function(e) {
$('.expose').mouseleave(function(e){
$('#overlay').fadeOut(0, function(){
$('.expose').css('z-index','1');
});});});});
HTML看起来像
<div id="overlay">
<div class="entry-content">
<div class="expose">something</div>
<div class="expose">something</div>
<div class="expose">something</div>
</div>
#overlay {
background:rgba(0,0,0,0.3);
display:none;
width:100%; height:100%;
position:absolute; top:0; left:0; z-index:99998;
}
我所追求的是只要用户将鼠标悬停在 entry-content div 上,将页面保持为灰色并突出显示他悬停的 div。
有任何想法吗?谢谢