[英]Jquery hover keep firing on a tag
這個想法是,當用戶將鼠標懸停在列表中的每個名稱上時,具有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/
解決方案:只需將builtStyle
函數中的z-index css從101更改為-1
z-index: -1;
注意:您在CSS中兩次指定了不透明度。
問題是您將背景圖像設置為沒有z索引的絕對位置。 因此,當您將鼠標懸停在“ 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分配給背景圖像,並且可以正常工作。
在查看了您的站點之后,只需簡單地將CSS規則更改為:
#content-wrapper {
position: relative;
z-index: 102;
overflow: hidden;
}
#preview{
pointer-events: none;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.