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悬停以获取有关其工作原理的更多信息

Answer 3

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