快速javascript悬停问题

Question

我有一个快速的JavaScript问题。当我将鼠标悬停在div“#post li”上时，我想知道是否有办法制作一个名为#post li span的div来显示（显示）？如果有人能为我提供代码，那就意味着很多。

Answer 1

您可以直接使用CSS执行此操作：

#post li span {
    display: none;
}

#post li:hover span {
    display: inline;
}

如果你想使用JavaScript并拥有jQuery，你可以使用：

$('#post li span').hide();
$('#post li').hover(
    function() { $('span', $(this)).show(); },
    function() { $('span', $(this)).hide(); }
);

如果你想使用JavaScript而没有jQuery，事情会变得更加复杂。

Answer 2

在较旧的IE中，您将无法访问无锚标记上的：hover伪类。所以你可以使用这样的javascript：

$('#post li').hover(function() {
    $(this).find('span').show();
  },
  function() {
    $(this).find('span').hide();
  }
);

查看jQuery hover了解有关其工作原理的更多信息

Answer 3

您可以使用CSS 将display: none应用于#post li span，然后为display:block添加#post li:hover span