jQuery 和悬停事件有问题
Having trouble with jQuery and the hover event
我想做的是当我将鼠标悬停在图像上时,我希望图像变暗,并且我希望文本出现在变暗图像的中心。请查看我的代码,了解我想要发生的事情的一个非常粗略的例子。
到目前为止我有:
-- 我在 jQ 中使用不透明度 属性 来使悬停时的图像变暗
-- 我使用几个月前发现的 css 片段将文本居中,该片段在悬停时显示 属性
基本上我拥有所有的组件并且在光标悬停在文本上之前它工作正常。如我的 fiddle 所示,不透明度来回切换多次,直到鼠标离开文本才停止。
tl;dr:当我将鼠标悬停在文本上时,如何防止文本和不透明度来回切换?
Here is an example of my problem
CSS
.centered {
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
#news {
text-align:center;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
padding:20px 0px;
background-color:#232323;
}
.newsImage {
width:100%;
height:auto;
position:relative;
}
.newsImageOverlay {
position:absolute;
text-decoration:none;
color:white;
background:none;
z-index:3;
display:none;
}
jQuery
$(document).ready(
$("#a1").hover(
function(){$("#a1").animate({opacity:'0.3'})},
function(){$("#a1").animate({opacity:'1'});}
);
$("#a1").hover(
function(){$("#a1Ov").css("display","inline"), "slow"},
function(){$("#a1Ov").css("display","none"), "slow";}
);
});
HTML
<div id="news" class="row">
<div class="col-sm-4">
<div id="a1Ov" class="newsImageOverlay centered">Title 1</div>
<img id="a1" src="project3.png" class="newsImage"/>
</div>
</div>
欢迎就我的代码提出更多建议 efficient/cleaner!
将这些行添加到您的 css 文件中:
-webkit-transform:(0);
-moz-transform:(0);
-o-transform:(0);
transform:(0);
应该防止它闪烁
只需将悬停效果也添加到文本即可:
$("#a1, #a1Ov").hover(...
明白了。我最后做的是用包装器 div 覆盖整个东西,将其设置为事件选择器,并使其不可见。如果你和我有同样的问题,给我发消息,我会告诉你我使用的方法
我想做的是当我将鼠标悬停在图像上时,我希望图像变暗,并且我希望文本出现在变暗图像的中心。请查看我的代码,了解我想要发生的事情的一个非常粗略的例子。
到目前为止我有: -- 我在 jQ 中使用不透明度 属性 来使悬停时的图像变暗 -- 我使用几个月前发现的 css 片段将文本居中,该片段在悬停时显示 属性
基本上我拥有所有的组件并且在光标悬停在文本上之前它工作正常。如我的 fiddle 所示,不透明度来回切换多次,直到鼠标离开文本才停止。
tl;dr:当我将鼠标悬停在文本上时,如何防止文本和不透明度来回切换?
Here is an example of my problem
CSS
.centered {
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
#news {
text-align:center;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
padding:20px 0px;
background-color:#232323;
}
.newsImage {
width:100%;
height:auto;
position:relative;
}
.newsImageOverlay {
position:absolute;
text-decoration:none;
color:white;
background:none;
z-index:3;
display:none;
}
jQuery
$(document).ready(
$("#a1").hover(
function(){$("#a1").animate({opacity:'0.3'})},
function(){$("#a1").animate({opacity:'1'});}
);
$("#a1").hover(
function(){$("#a1Ov").css("display","inline"), "slow"},
function(){$("#a1Ov").css("display","none"), "slow";}
);
});
HTML
<div id="news" class="row">
<div class="col-sm-4">
<div id="a1Ov" class="newsImageOverlay centered">Title 1</div>
<img id="a1" src="project3.png" class="newsImage"/>
</div>
</div>
欢迎就我的代码提出更多建议 efficient/cleaner!
将这些行添加到您的 css 文件中:
-webkit-transform:(0);
-moz-transform:(0);
-o-transform:(0);
transform:(0);
应该防止它闪烁
只需将悬停效果也添加到文本即可:
$("#a1, #a1Ov").hover(...
明白了。我最后做的是用包装器 div 覆盖整个东西,将其设置为事件选择器,并使其不可见。如果你和我有同样的问题,给我发消息,我会告诉你我使用的方法