使用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';
}