将淡入淡出过渡添加到 onmouseout 和 onmouseover

Question

我的 html 中有一个 onmouseover 和 onmouseout 图像。它完全完成了它的工作。我仍在努力解决的问题是向 onmouse 内容添加过渡，这样它就不会很快改变。当您将鼠标悬停在图片上时，我希望它淡入另一张图片。这样的事情可能吗？

这个人做了类似的事情，但对我不起作用:( : [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>

Answer 1

更改图像的 src 不会触发 css transition。这是您可以尝试的纯 css 解决方案。您可以使用 div 作为容器并在悬停时设置 background-image。

.icongestaltung {
  background: url(http://www.iconsdb.com/icons/preview/orange/Whosebug-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/Whosebug-xxl.png");
}

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

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

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

将淡入淡出过渡添加到 onmouseout 和 onmouseover

Add fade transition to onmouseout and onmouseover

html

css

onmouseover

onmouseout