javascript - 图像因 onmouseover 事件而抖动

Question

我无法解决鼠标悬停时抖动图像的问题。我有以下脚本：

      function displayText(id)
      {
        var el = document.getElementById(id);

        el.style.display = 'block';
      }

      function hideText(id)
      {
        var el = document.getElementById(id);

        el.style.display = 'none';
      }
    

.btn {
    margin-top: -90px;
    z-index: 999999999;
    position: absolute;
    text-align: center;
    background: #37a000;
    displa: block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href='#' >
<img class="streamer_img" alt="example" src="https://placeimg.com/640/480/nature"
onmouseover="this.src='https://placeimg.com/640/480/people'; displayText('hiddentext')" 
onmouseout="this.src='https://placeimg.com/640/480/nature'; hideText('hiddentext')" />
<p class="btn" id="hiddentext" style="display: none;">Watch/play</p>
</a>

一切都很好，但是当我将鼠标移到显示的 Watch 文本上时，一切都开始抖动。

我该如何解决这个麻烦？谢谢

标签： javascriptjqueryhtml

Answer 1

问题在于，当您将鼠标悬停在Watch元素上时，它会触发更改图像的mouseout事件。img这反过来隐藏了文本，触发了mouseover显示图像的文本......等等无限。

要解决此问题，您可以将事件处理程序附加到父a元素并img在其中找到要修改的元素，如下所示：

function displayText(id) {
  var el = document.getElementById(id);
  el.style.display = 'block';
}

function hideText(id) {
  var el = document.getElementById(id);
  el.style.display = 'none';
}

.btn {
  margin-top: -90px;
  z-index: 999999999;
  position: absolute;
  text-align: center;
  background: #37a000;
  displa: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href='#' onmouseenter="this.getElementsByClassName('streamer_img')[0].src='https://placeimg.com/640/480/people'; displayText('hiddentext')" onmouseleave="this.getElementsByClassName('streamer_img')[0].src='https://placeimg.com/640/480/nature'; hideText('hiddentext')">
  <img class="streamer_img" alt="example" src="https://placeimg.com/640/480/nature" />
  <p class="btn" id="hiddentext" style="display: none;">Watch/play</p>
</a>

请注意，我将事件处理程序更改为onmouseenter并onmouseleave获得更好的性能。

但是您应该注意，使用on*事件属性已经非常过时了。您应该改用不显眼的事件处理程序，如下所示：

window.addEventListener('load', function() {
  var a = document.querySelector('a');
  var img = document.querySelector('img');
  var p = document.querySelector('p');

  a.addEventListener('mouseenter', function() {
    img.src = a.dataset.hoversrc;
    p.style.display = 'block';
  });
  
  a.addEventListener('mouseleave', function() {
    img.src = a.dataset.leavesrc;
    p.style.display = 'none';
  });
});

.btn {
  margin-top: -90px;
  z-index: 999999999;
  position: absolute;
  text-align: center;
  background: #37a000;
  displa: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href='#' data-hoversrc="https://placeimg.com/640/480/people" data-leavesrc="https://placeimg.com/640/480/nature">
  <img class="streamer_img" alt="example" src="https://placeimg.com/640/480/nature" />
  <p class="btn" id="hiddentext" style="display: none;">Watch/play</p>
</a>