我想在悬停时将图像过渡到另一个图像。但是在使用下面的代码之后，图像的大小超过了页面，当悬停时图像消失并且看不到其他图像。
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;
}
最佳答案
我假设 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>关于javascript - 悬停时图像到另一个图像的过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32581749/