Question

我正在尝试设置一个简单的脚本，其中链接的图像在悬停时在ESRI地图日记模板上更改。通常我会做这样的事情;

<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：all;属性。它之所以这样做，是因为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中编写代码？或者可能有不同的解决方案？

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>

Answer 2

＆＃13;

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>How to change image tag element by mouser over and out</title>
            
            <style>
                #img1{
                    background-image: url('Penguins.jpg'); //change your image url
                    background-size: contain;
                }
                #img1:hover{
                    background-image: url('Koala1.jpg'); //change your image url
                    background-size: contain;
                }
            </style>
        </head>
        <body>
            <img id="img1" style="width:200px; height:200px;"  />
        </body>
    </html>

＆＃13;

<!-- begin snippet: js hide: false -->

＆＃13;

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

2 个答案: