当鼠标悬停时，我的图像会淡入另一个图像。第二个图像具有用户将遵循的链接的图像映射。每次我尝试单击 map 链接时，图像都会淡化回原始的第一张图像。到目前为止，这是我的代码。帮助
<script type='text/javascript' src='../js/jquery-1.9.1.min.js'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
<style>
div.fadehover {
position: relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="fadehover">
<img src="../Background.jpg" alt="" class="a" usemap="#Map" border="0"/>
<img src="../optiontwo.jpg" alt="" class="b"/>
<map name="Map" id="Map" class="maps">
<area shape="rect" coords="100,488,195,540" href="https://vimeo.com/lsufilmclub" />
<area shape="rect" coords="87,433,202,489" href="http://www.youtube.com/user/LSUFilmClub" />
<area shape="rect" coords="702,440,834,493" href="https://www.facebook.com/LSUFilmClub" />
<area shape="rect" coords="711,493,805,562" href="https://twitter.com/LSUFilmClub" />
</map>
</div>
</body>
最佳答案
您可能需要阻止点击不透明度为 0 的元素。一种解决方案可能是这样的:
$('img.a').click(function(event) {
if ($(this).css('opacity')==0) { event.preventDefault() };
});
然而，这仍然会阻止点击发生在它下面的元素上。根据您的设置方式，您可以添加一个额外的回调函数来在元素淡出后完全隐藏该元素，这样点击就会通过它，大致如下:
function() {
$(this).stop().animate({"opacity": "0"}, "slow", function () { $(this).hide(); });
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow", function () { $(this).hide(); });
});
关于javascript - 卡住鼠标悬停淡入淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15628991/