0

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

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

2 回答 2

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(); });
});
于 2013-03-26T03:53:42.907 回答
0

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

$("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;
    }
于 2013-03-26T04:05:52.877 回答