如何使用CSS或JavaScript显示和隐藏DIV？

Question

我刚刚看到一个演示，其中使用了这段jquery代码来在悬停时显示和隐藏一个dive，但这不可以只用常规的css完成吗？如果可以用css完成，那么使用javascript有什么优势吗？

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

- JasonDavis

Answer 1

CSS的:hover伪类在锚标签上可以很好地工作，但IE6无法识别li等元素上的:hover事件。

然而，如果你使用锚标签，你可以在CSS中实现相同的效果：

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

- Jody

---

+1 很好的第一篇回答 :) 我进行了编辑并将其更改为IE6，因为7和8版本支持除a以外的其他元素上的:hover效果。 - Josh Stodola

昨天有一条评论将类似这样的问题引向doctype.com！ - jrharshath

Answer 2

你可以使用CSS来完成这个操作，但是IE6只支持锚标签（A）上的:hover伪类，因此这种方法并不常用。

- Derek Slager

---

是的，但在这种情况下可能可以在a标签上使用:hover，但我们目前不知道，因为提问者没有包含任何标记。 - Josh Stodola

Answer 3

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

这将在第一次悬停时显示一个子集，然后隐藏，并在下一次显示另一个子集。

悬停功能还可以在多个元素上工作，并且仅在鼠标离开所有元素（而不仅仅是离开一个并移动到另一个）时触发。

- Lathan

Answer 4

Jody 是正确的。查看 CSS Display 属性的文档。

- JohnE

Answer 5

我在服务器端动态创建了类似这样的东西。我相信有更高效/更漂亮的方法，但通常这种方式可以满足我的需求。基本上隐藏所有的div，并显示需要显示的那个（从onClick事件中传递为参数）。

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

- J.Hendrix