2

我已经实现了一个功能，其中一个 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;
}
4

3 回答 3

2

您可以mouseleave在显示上设置事件，如下所示DIV：

演示：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-22T16:50:05.093 回答
1

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

于 2012-07-22T16:50:19.883 回答
1

改为使用.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-22T16:32:37.003 回答