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

Jody是对的。查看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';
}

使用CSS或Javascript显示和隐藏DIV？

5 个答案: