如何更改包裝div的鼠標懸停上的圖像

我試圖設置一個簡單的腳本，其中鏈接的圖像更改懸停時，在ESRI地圖雜誌模板上。通常我會做這樣的事情;如何更改包裝div的鼠標懸停上的圖像

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

這並不地圖雜誌工作，但是，因爲模板自動插入帶有指針事件的包裝DIV：所有;屬性。之所以這樣做，是因爲圖像自動設置爲在地圖日記模板的Lightbox中打開。所以爲了抵消這一點，並且允許將圖像鏈接到其他東西，可以使用wrapper 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中編碼？或者也許有不同的解決方案？

來源

2016-02-12 astrosa

你可以添加第二個圖像中有這顯示：沒有？在＃image-wrapper：hover上，您可以讓原始圖像顯示：無，而新圖像顯示：塊？ – MaxRocket

是的，我認爲這將工作。你有一個可以完成這個技巧的代碼示例嗎？提前致謝！ – astrosa

您是否可以更改模板代碼，或者我們是否需要動態添加第二個圖像？ – MaxRocket

這工作沒有了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>

來源

2016-02-12 16:23:08 MaxRocket

這樣做的伎倆！事實證明，它將每個圖像放在一個單獨的圖像包裝div中，但我用上述類將它們包裝在一個單獨的div中並且工作正常。謝謝！！ – astrosa

隨時。這個地方一直節省我的屁股。 :) – MaxRocket

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

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

來源

2016-02-12 16:18:12

如何更改包裝div的鼠標懸停上的圖像

回答

相關問題