Question

我的html中有一个onmouseover和onmouseout图像。它完全发挥作用。我仍在努力的是为onmouse的东西增加一个转换，所以它不会那么快地改变。当你将鼠标悬停在图片上时，我希望它会淡入另一张图片。这样的事情可能吗？

这个人做了类似的事情，但它并没有为我工作:(： [Change transition time on onmouseover and onmouseout?

检查我的代码，如果有简单的解决方案，请帮助我。最好没有java脚本......

＆＃13;

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

＆＃13;

Answer 1

更改图片的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>

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

1 个答案: