添加淡入淡出过渡到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

回答

相关问题