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

Answer 2

如果你只想做CSS，你必须把你的文字放在行内。

然后，为避免将其隐藏在行中，请使用

visibility: hidden;

到行（而不是opacity: 0）和

visibility: visible;

到可见元素。

但为了避免眨眼，你应该让那个元素扩展到所有行。

Demo

元素A位于元素B上方。无论如何，当将鼠标悬停在元素A上时，会使页面显示元素B仍然悬停在上面？

2 个答案: