在鼠标悬停上更改整个div

我已经实现了一个函数，其中div在悬停时被替换为另一个。问题是我希望它在鼠标移出时再次消失。但是其他分区出现时，鼠标移开的功能踢的很明显，因为光标悬停在新DIX ...在鼠标悬停上更改整个div

$(document).ready(function(){ 
    $("#div1").mouseover(function() { $("#show-div2").css('visibility','visible');}); 
    $("#div1").mouseout(function() { $("#show-div2").css('visibility','hidden'); 
});

HTML

<div id="div1"><a id="div1" href="#"><img src="images/email.png" alt="Email Marketing Services" /></a> 
         </div> 

         <div id="show-div2" style="visibility:hidden;"> 
          Bla Bla Bla 
         </div>

CSS

#div1 { 
    display: block; 
    width: 91px; 
    height: 91px; 
    overflow: hidden; 
    float: left; 
    margin: 0 0 120px 0px; 
} 


#show-div2 { 
    margin: -200px 0 0 -110px; 
    padding: 10px; 
    font-size: 14px; 
    width: 270px; 
    height: 340px; 
    position: absolute; 
    visibility: visible; 
    text-align: center; 
    color: black; 
    background-image: url(images/email-hover.png); 
    background-repeat: no-repeat; 
}

来源

2012-07-22 user1543008

_sidenote：_ IDs必须是唯一的 – undefined 2012-07-22 16:29:17

改为使用.hover()，因为它的行为与CSS :hover类似，并且与IE的onmouseenter和onmouseleave：

(function() { 
    var sd2 = document.getElementById('show-div2'); 
    $("#div1").hover(
     function() {sd2.style.visibility = "visible";}, 
     function() {sd2.style.visibility = "hidden";} 
    ); 
})();

请注意，我在回调函数中使用普通的JS。这是因为它比创建一个新的jQuery对象更加高效，只是为了设置一个样式属性。封闭使它更加有效。

来源

2012-07-22 16:32:37

您可以只设置在显示DIV的mouseleave事件，像这样：

演示：http://jsfiddle.net/SO_AMK/hAdcm/

的jQuery：

$("#div1").mouseenter(function() { 
    $("#show-div2").css('visibility', 'visible'); 
}); 
$("#show-div2").mouseleave(function() { 
    $("#show-div2").css('visibility', 'hidden') 
});

HTML：

<div id="div1"> 
    <a id="div1" href="#"><img src="images/email.png" alt="Email Marketing Services"/></a> 
</div> 
<div id="show-div2" style="visibility:hidden;"> 
    Bla Bla Bla 
</div>

CSS：

#div1 { 
    display: block; 
    width: 91px; 
    height: 91px; 
    overflow: hidden; 
    float: left; 
    margin: 0 0 120px 0px; 
} 


#show-div2 { 
    padding: 10px; 
    font-size: 14px; 
    width: 270px; 
    height: 340px; 
    position: absolute; 
    visibility: visible; 
    text-align: center; 
    color: black; 
    background-image: url(images/email-hover.png); 
    background-repeat: no-repeat; 
}

来源

2012-07-22 16:50:05

在您的代码中做了少许更改。看看这个... Demo。希望这是你正在寻找的。

来源

2012-07-22 16:50:19 Shant

在鼠标悬停上更改整个div

回答

相关问题