javascript - 元素 A 位于元素 B 之上。无论如何，当悬停在元素 A 上时，让页面看起来元素 B 仍在悬停？

Question

我有表格行，当将鼠标悬停在其中时，该行显示为透明(通过更改不透明度级别)。当行悬停时，我需要文本出现在行的中心。在悬停事件期间，我将 span 标记的位置更改为在行**上方。那很好用。问题是，如果用户将鼠标悬停在新文本上，该行的离开悬停事件就会启动，我会得到一种闪烁的效果。

无论如何，当新文本悬停在上面时，是否有离开悬停事件让该行不被启动？

** 我这样做是因为，如果我将文本作为标记包含在行本身中，文本将采用与行的其余部分相同的不透明度级别。我找不到办法让这一切停止发生。

<script>
  for(var i = 1; i <= 2; i++) {
     var name="#row" + i;

     $(name).hover(function() {
        $(this).css("opacity", 0.2);
        $("#text").show();
        $("#text").css("top", -20);
     }, function() {
        $(this).css("opacity", 1.0);
        $("#text").hide();
     });
  }

</script>

<table>
  <tr id="row1">
    <td>Stuff</td>
    <td>Stuff2</td>
  </tr>
  <tr id="row2">
    <td>Stuff</td>
    <td>Stuff2</td>
  </tr>
</table>
<span id="text" style="display: none;">Click here</span>

Answer 1

你可以这样做:

$(document).ready(function(){
  var span = $('#text');
  $('tr').hover(function () {
      $('td',this).css('opacity','0.2');
      $(this).append(span);
      span.show();
  },function () {
      $('td',this).css('opacity','1');
      span.remove();
  })
})

但是您可能还需要对 CSS 进行一些更改；查看演示 http://jsfiddle.net/m2J8R/12/

如果我避免对您的功能造成闪烁影响是正确的，请更改此选择器:

$(this).css("opacity", 0.2);

为此

$('td',this).css("opacity", 0.2);