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文本上时，一切都开始动摇了。

我该如何解决这个问题？感谢

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

图像随着onmouseover事件而震动

1 个答案: