Question

我正试图在鼠标悬停在另一个元素上显示/隐藏span标记

<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鼠标悬停时我想显示[拖动]跨度但仅针对相关的li元素。它应该只显示我最接近的猜测。感谢。

Answer 1

试试这个：

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

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

Answer 2

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

Answer 3

您可以使用jquery show和hide函数。

Answer 4

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");
    });

鼠标悬停时显示隐藏元素

4 个答案: