添加淡入淡出過渡到onmouseout和onmouseover

我在我的html中有一個onmouseover和onmouseout圖像。它完全做到了。我仍然努力的是向onmouse的東西添加一個過渡，所以它不會那麼快地改變。當您將鼠標懸停在圖片上時，我希望它會淡入其他圖片中。是這樣的可能嗎？添加淡入淡出過渡到onmouseout和onmouseover

這個人做了這樣的事情，但它並沒有爲我工作:(。 [Change transition time on onmouseover and onmouseout?

檢查我的代碼，並請幫助我，如果有一個簡單的解決方案最好是沒有Java腳本.. 。

<html> 
 
    <body> 
 
      <div class="startpageicons"> 
 
      <div class="icongestaltung"> 
 
       <img src="images/startpageicon_draw.png" onmouseover="this.src='images/startpageicon_gestaltungunddesign.png'" onmouseout="this.src='images/startpageicon_draw.png'" style="transition: -webkit-transition: all .3s ease-in-out; 
 
-moz-transition: all .3s ease-in-out; 
 
transition: all .3s ease-in-out;"> 
 
      </div> 
 
     </body> 
 
</html>

來源

2017-09-14 Philip Kuhn

請使用網絡圖片來代替。您的「images/startpageicon_draw.png」不會顯示在代碼片段中。 – brian17han

你更喜歡純css解決方案還是jQuery解決方案？ – brian17han

更改圖像的src不會觸發CSS transition。這裏是一個純CSS搜索解決方案你可以試試。您可以使用div作爲容器，並設置懸停時的background-image。

.icongestaltung { 
 
    background: url(http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png) center center no-repeat; 
 
    background-size: contain; 
 

 
    width: 150px; 
 
    height: 150px; 
 

 
    -webkit-transition: all .3s ease-in-out; 
 
    -moz-transition: all .3s ease-in-out; 
 
    transition: all .3s ease-in-out; 
 
} 
 

 
.icongestaltung:hover { 
 
    background-image: url("http://www.iconsdb.com/icons/preview/gray/stackoverflow-xxl.png"); 
 
}

<html> 
 
<body> 
 
    <div class="startpageicons"> 
 

 
    <div class="icongestaltung"></div> 
 

 
    </div> 
 
</body> 
 
</html>

來源

2017-09-14 20:51:13 brian17han

添加淡入淡出過渡到onmouseout和onmouseover

回答

相關問題