Question

我已经实现了一个函数，其中div在悬停时被另一个替换。问题是我希望它在mouseout上再次消失。但是当另一个div出现时，鼠标输出功能显然是因为光标悬停在新的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;
}

Answer 1

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

Answer 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对象只是为了设置一个样式属性要高效得多。封闭使它更有效。

Answer 3

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

鼠标悬停时更改整个div

3 个答案: