logo标签列表

悬停时图像向另一张图像的过渡

javascriptjqueryhtmlcssimage
4

我希望当鼠标悬停时，图像可以平滑过渡到另一张图片。但是在使用以下代码后，图像的大小超出了页面，并且当鼠标悬停时，图像消失，没有其他图片可以被看到。

HTML

<html>
    <head>
     <title></title>
     </head>
    <body>
      <div id="cssfade">
       <img src="image1.jpg" height:200px;width:300px;/>
       </div>
    </body>
</html>

CSS

#cssfade { 
    background-image: url('image2.jpg');
    height:200px; 
    width: 300px;
}
#cssfade img {
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    -ms-transition: all ease 1s;
    transition: all ease 1s;
}
#cssfade img:hover {
    opacity:0;
}
1
我建议将一张图片放在另一张图片上面（如果作为背景图片，则一个div在另一个div上面），并在悬停时更改不透明度，这样就不会出现闪烁/白色闪烁。 - Kristine
请看这里：http://jsfiddle.net/es_kaija/ox6v7g6m/1/ - Kristine
3个回答
3

我假设div中的图片是内容，因此我保留了它，并仅将鼠标悬停效果移动到包装div上。

#cssfade {
  width: 300px;
  height: 200px;
  background-image: url(http://lorempixel.com/300/200/sports/2/);
}
#cssfade img {
  width: 300px;
  height: 200px;
  display: block;
  transition: opacity 1s ease;
}
#cssfade:hover img {
  opacity: 0;
}
<div id="cssfade">
  <img src="http://lorempixel.com/300/200/sports/1/" alt="">
</div>

2

使用 background-image 在 div 上。

在 hover 时更改 background-image。

过渡效果：

MDN CSS Tricks

Demo

#cssfade {
  background-image: url('http://lorempixel.com/400/200');
  height: 200px;
  width: 300px;
}
#cssfade:hover {
  -webkit-transition: all ease 1s;
  -moz-transition: all ease 1s;
  -o-transition: all ease 1s;
  -ms-transition: all ease 1s;
  transition: all ease 1s;
  background-image: url('http://lorempixel.com/400/200/sports/1');
}
<div id="cssfade"></div>

最好解释一下你的CSS属性，例如：-webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s; - user786
所有不同的变化都是为了跨浏览器兼容性，我很确定。 - velkoon
2

编辑 - 为了澄清与Tushar的答案的区别，转换应该在#cssfade上而不是#cssfade:hover上，以确保当悬停和取消悬停时应用过渡效果。

HTML：

<html>
  <head>
    <title>...</title>
  </head>
  <body>
    <div id="cssfade"></div>
  </body>
</html>

CSS：

#cssfade { 
  height:200px; 
  width: 300px;
  background-image: url('image1.jpg') no-repeat;
  -webkit-transition: all ease 1s;
  -moz-transition: all ease 1s;
  -o-transition: all ease 1s;
  -ms-transition: all ease 1s;
  transition: all ease 1s;
}

#cssfade:hover {
  background-image: url('image2.jpg') no-repeat;
}
如果您解释一下您的CSS属性，例如-webkit-transition: all ease 1s; -moz-transition: all ease 1s; -o-transition: all ease 1s; -ms-transition: all ease 1s; transition: all ease 1s;，那会更好。 - user786
为什么我需要解释CSS属性，而提问者已经试图使用它们了呢？如果提问者请求，我很乐意进行澄清，但考虑到这些属性已经在他们的问题中提到，我认为他们已经知道了它们的目的。 - Manno
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接