0

我正在尝试在另一个元素的鼠标悬停时显示/隐藏跨度标签

<li class="requirement" id="requirement_1">
  <h3><a href="#">REQ 2 - QWERTY</a></h3>
  <span class="fr drag" style="display:none;">[drag]</span>
</li>
<li class="requirement" id="requirement_2">
  <h3><a href="#">REQ 2 - AZERTY</a></h3>
  <span class="fr drag" style="display:none;">[drag]</span>
</li>

基本上在 h3 鼠标悬停时，我想显示 [drag] span 但仅适用于相关的 li 元素。它应该只显示我猜的最接近的。谢谢。

4

4 回答 4

4

尝试这个：

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

http://jsfiddle.net/yzFAN/1/

于 2013-05-06T13:51:26.890 回答
1

您可以使用 jQuery .hover() 函数，它有两个函数，一个在鼠标进入所需元素时进入，另一个在鼠标离开它时触发（基本上是 mouseenter 和 mouseleave 事件的组合。您可以使用 . toggle() 函数，它隐藏和显示这些回调函数中的元素。

于 2013-05-06T13:53:43.013 回答
0 
I Think this will work in your case.

  $('.requirement h3').hover(function(){
       $(this).next(".fr .drag").css("display","block");
    }, function(){
       $(this).next(".fr .drag").css("display","none");
    });
于 2013-05-06T13:58:37.680 回答
0

您可以使用 jquery 显示和隐藏功能。

于 2013-05-06T13:49:20.520 回答