在懸停時顯示隱藏的div

我有一個隱藏的div，當我將鼠標懸停在div「人物包裹」上時，我想顯示該div。我怎樣才能做到這一點？我應該使用CSS技巧還是可以用JQUERY完成？在懸停時顯示隱藏的div

我想有DIV的出現：

#buttons { 
display: none; 
    position:absolute; 
    right:10px; 
    top:10px; 
margin: 0px 0px 0px 0px; 
height: 30px; 
width: 225px; 
overflow: auto; 
}

來源

2013-01-20 Matt

可以使用CSS懸停選擇，你可以在一些jQuery的事件中使用顯示（）/隱藏（）函數。最好使用CSS。 – gotqn

請不要用javascript來完成。就像你說的那樣用CSS來做。速度更快。 – Muqito

NNNNNN解釋了一個純CSS的方式是最好的，但它的使用jQuery非常簡單爲好，它所做的一切在鼠標懸停時調用第一個函數，當鼠標離開時調用第二個函數。

$("#person-wrap").hover(
    function() { 
     $("#buttons").addClass("hover"); 
}, 
    function() { 
     $("#buttons").removeClass("hover"); 
});

而且簡單的CSS：

.hover{ 
    display:inline; 
}

來源

2013-01-20 08:23:23 Newmu

如果您有多個「人員包裝」，當您將鼠標懸停在一個div「人員包裝」中時，將顯示所有按鈕 – Stiger

鑑於您的#buttons DIV是#person-wrap一個孩子，你可以只用CSS做：

#person-wrap:hover #buttons { 
    display : block; 
}

演示：http://jsfiddle.net/ceTdA/4/

來源

2013-01-20 08:35:25 nnnnnn

非常好的解決方案，謝謝。 – henrywright

添加此css：

#profile-pic:hover #buttons{ 
    display:inline; 
}

這裏工作jsfiddle

來源

2013-01-20 09:25:59

你應該試試這個代碼：

$("#person-wrap").hover(function() { 
    $(this).find('#buttons').show(); 
}, function() { 
    $(this).find('#buttons').hide(); 
});

來源

2013-01-20 09:26:51 Stiger

在懸停時顯示隱藏的div

回答

相關問題