如何在包装器的鼠标悬停时更改图像 div

Question

我正在尝试设置一个简单的脚本，其中 linked 图像在悬停时在 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：全部；属性。之所以这样做，是因为 Map Journal 模板自动将图像设置为在灯箱中打开。因此，为了抵消这一点，并允许图像 linked 到其他东西，使用了包装器 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>

然而，这样做会停用上述悬停脚本。如果我用指针事件覆盖 div CSS：none，悬停脚本有效但 link 不起作用。

关于解决此问题的任何建议，以便 link 和悬停都能正常工作？我考虑过更改脚本，使鼠标悬停在 div 上起作用，但随后它改变了图像。我如何在 JS 中编写代码？或者也许有不同的解决方案？

Answer 1

这适用于没有 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>

如何在包装器的鼠标悬停时更改图像 div

How to change an image on mouseover of wrapper div

javascript

css

hover

pointer-events