时间戳

首页 > 解决方案 > 使用悬停时图像不显示

html - 使用悬停时图像不显示

问题描述

当我将鼠标悬停在图像上时，我试图将图像更改为另一个图像，但屏幕上什么都没有出现，我很困惑。HTML 和 CSS 在同一个文件中。一切都在一个名为“海象”的文件夹中，在该文件夹中是 html/css 编码和一个名为“图像”的图像文件夹。
这是代码：

<style>
.b-george {
   width: 130px;
   height: 195px;
   background: url("images/beatlegeorge.jpg") no-repeat;
   margin: 50px;
}
.b-george:hover {
   background: url("images/george.jpg") no-repeat;
}
</style>
<div class="b-george"></div>'

标签： htmlcssimage

解决方案

您需要background-size为该元素提供值：

background-size: 130px 195px;


.b-george {
  width: 130px;
  height: 195px;
  background: url("https://www.netclipart.com/pp/m/1-15005_animals-clipart-png-cartoon-animals-png-cute-animal.png") no-repeat;
  margin: 50px;
  background-size: 130px 195px;
}
.b-george:hover {
  background: url("http://pluspng.com/img-png/animal-png-i-absolutely-love-tigers-and-have-two-of-my-own-on-my-tattoos-347.jpg") no-repeat;
  background-size: 130px 195px;
}
<div class="b-george"></div>

推荐阅读