Question

这个想法是当用户将鼠标悬停在列表中的每个名称时，带有id预览的div将具有背景图像。第一个a没有问题，但是当我添加href时，JavaScript会继续触发悬停事件。这有什么问题？

HTML

<ul>
  <li><a>John</a></li>
  <li><a href="#">Sam</a></li>
  <li><a href="#">Tom</a></li>
</ul>
<div id="preview"></div>

的JavaScript

jQuery(function() {
  var names = $('a');
  var bg = document.getElementById('preview');

  names.hover(
    changeBackground, handlerOut
  );

  function changeBackground(e) {
    console.log('hover');
    var image = 'http://londonalley.com/wp-content/uploads/2014/08/creativesUS3bb-1920x1080.jpg';
    if (bg.style.cssText.length == 0) {
      bg.style.cssText = builtStyle(image);
      bg.style.display = "block";
    }
  }

  function builtStyle(image) {
    return "width: 100%;height: 100%;opacity: .6;position: absolute;top:0px;left: 0px;z-index: 101;opacity:.9: 1;display: block;visibility: visible;background-image: url(" +
      image + ");"
  }


  //handle mouse leaves
  function handlerOut() {
    console.log('out');
    if (bg.style.cssText) {
      bg.style.cssText = "";
    }

  }
});

JSfiddle：https://jsfiddle.net/rattanak22/q96a6dz4/

Answer 1

解决方案：只需将builtStyle函数中的z-index css从101更改为-1

z-index: -1;

注意：您已在CSS中指定了两次不透明度。

Answer 2

问题是您将背景图像设置为绝对定位而没有z-index。因此，当您将鼠标悬停在“a”标记上时，changeBackground函数会指定一个绝对定位且没有z-index的背景图像。这将首先带来图像，就像“a”标签之上的一层。当这个新层出现时，鼠标无法触及触发hoverOut的“a”标记，并且每个鼠标时刻都会继续循环。

function builtStyle(image) {
return "width: 100%;height: 100%;opacity: .6;position: absolute;top:0px;left: 0px;z-index: -1;opacity:.9: 1;display: block;visibility: visible;background-image: url(" +
  image + ");"

}

https://jsfiddle.net/pradosh987/9p0pjtd4/

我已经为背景图像指定了-1 z-index，并且可以正常工作。

Answer 3

查看您的网站后，只需将您的css规则更改为：

#content-wrapper {
    position: relative;
    z-index: 102;
    overflow: hidden;
}
#preview{
   pointer-events: none;
}

Jquery悬停继续射击标签

3 个答案: