想法是,当用户将鼠标悬停在列表中的每个名称上时,带有 id preview 的 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 = "";
}
}
});
最佳答案
解决方案:只需将 builtStyle
函数中的 z-index css 从 101 更改为 -1
z-index: -1;
注意:您在 CSS 中指定了两次不透明度。
关于javascript - Jquery 悬停在标签上持续触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36232393/