Question

鼠标悬停时，我的图像会淡入另一个图像。第二个图像具有用户将遵循的链接的图像映射。每次我尝试单击地图链接时，图像都会淡化回原始的第一张图像。到目前为止，这是我的代码。帮助

<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>

Answer 1

您可能需要停止点击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(); });
});

Answer 2

我可能误解了你的意图，但是在你给我们的代码中，链接（图像映射）的图像逐渐淡出。我想你想要：

$("img.b").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

img.a {
    position: absolute;
    left: 0;
    top: 0;

    }

img.b {
    position: absolute;
    left: 0;
    top: 0;
   z-index: 10;
    }

冻结鼠标淡入淡出

2 个答案: