Question

我想在悬停时将图像转换为另一张图像。但使用以下代码后，图像的大小超过页面，当悬停时图像消失，无法看到其他图像。

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

Answer 1

我假设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>

Answer 2

在background-image上使用div。

在hover上更改background-image。

过渡：

MDN CSS Tricks

Demo

＆＃13;

#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');
}

＆＃13;

<div id="cssfade"></div>

＆＃13;

Answer 3

编辑 - 只是为了澄清与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; }

在悬停时将图像转换为另一个图像

3 个答案: