使用悬停时图像不会出现

Question

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

<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>'

Answer 1

您需要为该元素提供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>