Question

我已经尝试了一下HTML5，我想尝试在鼠标悬停时进行图像更改。我尝试了几种方法，但都没有达到预期的效果。我查看了多个教程，但他们主要解释了如何为同一个图像添加效果，而不是完全改变它。

这是我现在的代码，它实际上并没有按预期工作：

＆＃13;

ul.imagetransition li img:hover {
  background-image: url('Data/Images/Image 1Hover.png');
}

＆＃13;

<section>
  <ul class="imagetransition">
    <li><a href="http://testlink.com"><img src="Data/Images/Image 1.png"/></a></li>
  </ul>
</section>

＆＃13;

在此代码中，原始图像已正确预览，但当鼠标悬停在原始图像上时，立即会添加第二张图像的部分 强>到第一个。我尝试过添加过渡效果代码，但它没有任何效果。我将对此进行更多研究，如果有人知道/了解如何完成这项工作，请指出正确的方向！：d

如果需要进一步的信息/代码，请告诉我

非常感谢，祝你有个美好的一天

Answer 1

它对你有用吗？

HTML：

<ul>
    <li id="aaa">
      <img class="bottom" src="a.jpg">
      <img class="top" src="b.jpg">
    </li>
</ul>

CSS：

#aaa {
  position:relative;
  height:100px;
  width:100px;
  margin:0 auto;
  list-style-type: none;
}

#aaa img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#aaa img.top:hover {
  opacity:0;
}

Answer 2

除非您使用JS的getElementById并更改背景图像的src，否则从过去的经验来看，这将无效。无论是那个还是使用二合一的东西，比如

<div id="parent1">
<ul></ul>
</div>

如果你将鼠标悬停在它上面，第一个背景的不透明度为0，ul的不透明度为1，使用父/子关系和激活，或者尝试在第二个背景图像的末尾添加!important像填充这样的限制不会起作用，因为它们只能分离你的图像。

希望这有帮助。

Ps：我在手机上写这个：/但现在我用笔记本电脑编辑了它

这里有一些使用JS的例子

the mouseover thing

and this is for the change image thing

我认为你可以很好地拼凑这些。

Answer 3

HTML

<img class="bottom" src="a.jpg">

CSS

img
{
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s;
    transition: width 2s;
}
img:hover {
    width: 300px;
}

HTML转换图像与转换？

3 个答案: