2

ホバー時に div が別の div に置き換えられる関数を実装しました。問題は、マウスアウトで再び消えてほしいということです。しかし、他の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;
}
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 と IE の and のように動作する:hoverため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 に答える