在鼠标悬停时更改整个 div答案

【问题标题】：Change entire div on mouseover在鼠标悬停时更改整个 div
【发布时间】：2012-07-22 16:24:04
【问题描述】：

我已经实现了一个功能，其中一个 div 在悬停时被另一个替换。问题是我希望它在鼠标移出时再次消失。但是当另一个 div 出现时，mouseout 功能显然是因为光标悬停在新的 dix 上...

 $(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;
}

【问题讨论】：

旁注： ID 必须是唯一的

标签： jquery html mouseover onchange onhover

【解决方案1】：

您可以在显示的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;
}

【讨论】：

【解决方案2】：

改用.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 对象来设置一个样式属性要高效得多。关闭使其更加有效。

【讨论】：

【解决方案3】：

对您的代码进行了一些更改。看看这个...Demo。希望这是您正在寻找的。p>

【讨论】：