Question

当我悬停#triangle时，＃tri-overlay将显示但仍然闪烁，因为它与＆＃34; display：none＆＃34;在css。他继续从＆＃34;显示：无＆＃34;到＆＃34;显示：块＆＃34;这会导致闪烁效果。我该如何避免这种冲突？

我正在使用以下代码。

＆＃13;

$(function() {
  $('#triangle').hover(function() {
    $('#tri-overlay').show();
  }, function() {
    $('#tri-overlay').hide();
  });
});

＆＃13;

.slide-des {
  width: 50%;
  height: 50%;
}
#triangle {
  width: 12em;
  height: 10em;
  position: relative;
  background: red;
  display: block;
}
#tri-overlay {
  background: green;
  width: 100%;
  height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="tri-overlay" style="display: none;"></div>
<div class="slide-des">
  <div id="triangle"></div>
</div>

＆＃13;

Answer 1

使用CSS停止叠加与鼠标交互：

#tri-overlay{
   pointer-events: none;
}

当一个元素出现在鼠标下方时，某些浏览器会立即说它刚刚将前一个元素留在鼠标下。

参考：https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

来自Archer的借用样本布局：

$("#element2").hover(function() {
    $("#element2-overlay").show();
  },
  function() {
    $("#element2-overlay").hide();
});

#element2 {
  background-color: green;
}
#element2-overlay {
  pointer-events: none;
  background-color: yellow;
  display: none;
}

.example {
  height: 100px;
  position: absolute;
  top: 0;
  width: 100px;
}
.example2 {
  left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="element2" class="example example2"></div>
<div id="element2-overlay" class="example example2"></div>

jQuery .show（）/ .hide（）保持闪烁

1 个答案: