<div class="front_hover">
<img class="bg_img" src="image.jpg" width="320px" height="400px"/>
<div class="front_roll" style="display:none;">
<!-- CONTENT HERE -->
</div>
</div>
<script language="JavaScript" type="text/javascript">
jQuery(document).ready(function(){
jQuery(".front_hover").hover(
function () {
jQuery(".front_roll", this).fadeIn(200);
},
function () {
jQuery(".front_roll", this).fadeOut(200);
});
});
</script>
我有一个站点,当用户将鼠标悬停在首页的某个 block 上时,该站点使用 jQuery 来显示内容。到目前为止它一直运行良好,它只是在 Chrome 中停止工作。所有其他浏览器似乎仍能正常工作。
最佳答案
答案,来自对原帖的评论:
jQuery 悬停实际上工作正常(淡入和淡出元素)。
问题出在 CSS 定位上。如果您将 #content.front_content #front_top .front_roll
规则更改为具有 position: absolute
,并删除 top
和 left
属性,然后它工作正常
确保它的父级有 position: relative;
在这种情况下 .front_hover { position: relative; }
关于jQuery .hover 在 Chrome 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21184053/