在鼠標懸停上更改整個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

回答

相關問題