用CSS或Javascript顯示和隱藏DIV？

我剛剛看到一個演示，有這個jQuery代碼來顯示和隱藏懸停潛水，這不能用regualr css來完成嗎？如果你可以用CSS做到這一點有沒有用JavaScript做到這一點的好處？用CSS或Javascript顯示和隱藏DIV？

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

來源

2009-12-30 JasonDavis

CSS懸停可以很好地處理錨點標記，但IE6無法識別像li標記之類的東西懸停事件。

如果您正在使用一個錨標記，但是，你可以達到同樣的效果CSS：

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

來源

2009-12-30 20:26:44 Jody

+1尼斯第一答案:)我編輯它，並改爲IE6，因爲7和8確實支持'：'以外的元素'：hover' –

...昨天有評論指出這樣的問題到doctype.com ！ – jrharshath

你可以用CSS做到這一點，但IE6只支持：錨定標記（A）上的hover僞類，所以它不常見。

來源

2009-12-30 20:22:00

事實，但：懸停可能能夠在'在這種情況下了'標籤中使用，但我們沒有在這一點上知道，因爲提問者沒有包括任何標記。 –

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

來源

2009-12-30 20:29:38 JohnE

.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()} 
    );

，將顯示一組兒童的他們第一次懸停，然後隱藏，並在下一次顯示一組不同的孩子。

懸停功能也適用於多個要素，只有大火如果鼠標已經離開所有元素（不只是當它離開一個移動到另一個）

來源

2009-12-30 20:35:08 Lathan

-1

我在服務器端動態創建這樣的事情。我確信有更高效/更漂亮的方式，但這通常滿足我的需求。基本上隱藏所有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'; 
}

來源

2009-12-30 20:45:15

用CSS或Javascript顯示和隱藏DIV？

回答

相關問題