javascript - 鼠标悬停 react 在元素底部效果不佳

Question

我创建了代码，当使用hover函数悬停时，消息显示在悬停元素下面。有时，当鼠标放在要悬停的元素下时，hover不起作用。
在Firefox中，当鼠标光标从下面悬停时，有时悬停显示的元素可能不显示。
在Chrome中，当您从下面移动鼠标光标时，显示的元素将继续闪烁。

$(".t").hover(
  function() {
    $(this).parent().append('<span class="h animated " style="top:' + (parseInt($(this).outerHeight()) + 20) + 'px">' + $(this).attr('data-tooltip') + '</span>');
  },
  function() {
    $(this).parent().find('.h').remove();
  }
);

.t {
  position: relative;
}

.h {
  position: absolute;
  display: inline-block;
  padding: 7px 10px;
  border-radius: 3px;
  text-align: left;
  left: 0;
}

.h::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 10px;
  border: 15px solid transparent;
}

.i::before {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: '\f059';
}

.i {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #f0f;
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button type="button" class="t" data-tooltip="hover now!"><span class="i"></span></button>
</div>

为什么即使鼠标光标位于悬停事件发生的区域中，悬停事件也不显示元素？

Answer 1

问题的原因是被添加元素的伪元素与按钮的底部重叠。
解决方案之一是将元素（.h：：before）的top属性的值调整到与按钮不重叠的位置。

.h::before {
  content: "";
  position: absolute;
  top: 0;  /* CHANGED */
  left: 10px;
  border: 15px solid transparent;
}

$(".t").hover(
  function() {
    $(this).parent().append('<span class="h animated " style="top:' + (parseInt($(this).outerHeight()) + 20) + 'px">' + $(this).attr('data-tooltip') + '</span>');
  },
  function() {
    $(this).parent().find('.h').remove();
  }
);

.t {
  position: relative;
}

.h {
  position: absolute;
  display: inline-block;
  padding: 7px 10px;
  border-radius: 3px;
  text-align: left;
  left: 0;
}

.h::before {
  content: "";
  position: absolute;
  top: 0;  /* CHANGED */
  left: 10px;
  border: 15px solid transparent;
}

.i::before {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: '\f059';
}

.i {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #f0f;
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button type="button" class="t" data-tooltip="hover now!"><span class="i"></span></button>
</div>

或者，伪元素也可以放置在具有 z-index属性的按钮下。

.h::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 10px;
  border: 15px solid transparent;
  z-index: -1; /* ADDED */
}

$(".t").hover(
  function() {
    $(this).parent().append('<span class="h animated " style="top:' + (parseInt($(this).outerHeight()) + 20) + 'px">' + $(this).attr('data-tooltip') + '</span>');
  },
  function() {
    $(this).parent().find('.h').remove();
  }
);

.t {
  position: relative;
}

.h {
  position: absolute;
  display: inline-block;
  padding: 7px 10px;
  border-radius: 3px;
  text-align: left;
  left: 0;
}

.h::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 10px;
  border: 15px solid transparent;
  z-index: -1; /* ADDED */
}

.i::before {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: '\f059';
}

.i {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #f0f;
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button type="button" class="t" data-tooltip="hover now!"><span class="i"></span></button>
</div>