Question

我有2个按钮，a和b，我想在a的悬停上切换，但是它之间一直闪烁，因为我认为一旦a消失了，它触发mouseexit。

它们的显示位置相同。

$('#a').hover(
  function() {
    $('#a').css("display", "none")
    $('#b').css("display", "block")
  },
  function() {
    $('#a').css("display", "block")
    $('#b').css("display", "none")
  }
);

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div>
  <i id="a" class="a" style="position: absolute; right: 48px; top: 30px; width: 24px;">A</i>
  <i id="b" class="b" style="display: none; position: absolute; right: 48px; top: 30px; width: 24px;">B</i>
</div>

Answer 1

一种解决方法是使用mouseenter和mouseleave事件。

$('#a').on('mouseenter', function(event) {
  $(this).hide();
  $('#b').show();
});
$('#b').on('mouseleave', function(event) {
  $(this).hide();
  $('#a').show();
});

#b {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<button id="a">A</button>
<button id="b">B</button>

如何在前一个元素的悬停状态下触发一个元素与另一个元素的切换

1 个答案: