我正在尝试在 ESRI Map Journal 模板上设置一个简单的脚本,其中链接的图像会在悬停时发生变化。通常我会做这样的事情;
<script language="javascript">
function MouseRollover(MyImage) {
MyImage.src = "image2";
}
function MouseOut(MyImage) {
MyImage.src = "image1";
}
</script>
<a href="link">
<img src="image1" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)">
</a>
然而,这不适用于 Map Journal,因为模板会自动插入一个带有指针事件的包装 div:所有;属性(property)。之所以这样做,是因为 Map Journal 模板自动将图像设置为在灯箱中打开。因此,为了抵消这种情况,并允许将图像链接到其他内容,使用了包装器 div。于是就变成了;
<a href="link">
<div id="image-wrapper" style="pointer-events: all; display: inline-block; cursor: default; max-width: 100%; position: relative;">
<img src="image1" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)"></div>
</a>
然而,这样做会停用上面的悬停脚本。如果我用 pointer-event: none 覆盖 div CSS,悬停脚本可以工作,但链接不起作用。
关于解决此问题的任何建议,以便链接和悬停都能正常工作?我考虑过更改脚本,以便将鼠标悬停在 div 上,但随后它会更改图像。我如何在 JS 中编写代码?或者也许有不同的解决方案?
最佳答案
这不需要 javascript,只需要 css。尽可能总是更好。让我知道这是否适合您。
.default-image {
display: block;
}
.hover-image {
display: none;
}
#image-wrapper:hover .default-image {
display: none;
}
#image-wrapper:hover .hover-image {
display: block;
}
<a href="link">
<div id="image-wrapper" style="pointer-events: all; display: inline-block; cursor: default; max-width: 100%; position: relative;">
<img class="default-image" src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png" />
<img class="hover-image" src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png" />
</div>
</a>
关于javascript - 如何在包装器 div 的鼠标悬停时更改图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35366675/