使用CSS或Javascript顯示和隱藏DIV？

Question

我剛剛看到一個演示了這個jquery代碼來顯示和隱藏懸停的潛水，這不能用regualr css完成嗎？ 如果你能用css做到這一點，用javascript做這個有什么好處嗎？

$('.comment').hover(function() {
  $(this).children('.delete').show();
}, function() {
  $(this).children('.delete').hide();
});

Answer 1

CSS懸停適用於錨標簽，但IE6無法識別li標簽之類的懸停事件。

但是，如果您使用的是錨標記，則可以在CSS中實現相同的效果：

a.comment       .delete { display: none; }
a.comment:hover .delete { display: block; }

Answer 2

您可以使用CSS執行此操作，但IE6僅支持錨標記（A）上的：hover偽類，因此它不常見。

Answer 3

喬迪是對的。 查看CSS Display屬性的文檔。

Answer 4

.hover將提供更多功能。 如果您提供2個以上的功能，它將循環執行所有功能。 例

$('.comment').hover(
    function(){$(this).children('.delete.first').show()},
    function(){$(this).children('.delete.first').hide()},
    function(){$(this).children('.delete.second').show()},
    function(){$(this).children('.delete.second').hide()}
    );

這將顯示一組孩子第一次盤旋，然后隱藏，下一次顯示一組不同的孩子。

懸停功能也適用於多個元素，只有在鼠標離開所有元素時才會觸發（不只是當它離開一個元素並移動到另一個元素時）

Answer 5

我在服務器端動態創建這樣的東西。 我確信有一種更有效/更漂亮的方式，但這通常可以滿足我的需求。 基本上隱藏所有div並取消隱藏需要顯示的div（從onClick事件中作為arg傳遞）。

function toggleTab(id)
{
    document.getElementById('divEnrollment').style.display='none';    
    document.getElementById('divSearch').style.display='none';
    document.getElementById('divMeeting').style.display='none';
    document.getElementById('divBenefit').style.display='none';
    document.getElementById('div' + id).style.display='block';

    document.getElementById('spnEnrollment').style.color='blue';    
    document.getElementById('spnSearch').style.color='blue';
    document.getElementById('spnMeeting').style.color='blue';
    document.getElementById('spnBenefit').style.color='blue';
    document.getElementById('spn'+id).style.color = 'red';
}