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