html - IMG 不会悬停

Question

正如您在我的代码中看到的，我正在创建几个不同的圆形链接，这些链接有一个图像，但是当您将鼠标悬停在图像上时，我希望它将图像更改为其他图像。

但是，当我尝试将鼠标悬停时，它不会起作用吗？ :S

CSS:

.Row {
width:16%; 
height:250px; 
text-align:center; 
margin-top:25px;
margin-left:130px; 
float:left; 
display:block; 
border:0px solid red; 
overflow:hidden; 
 } 

 .Google {
width:240px; 
height:240px; 
text-align:center; 
border:5px solid white; 
border-radius:300px;
margin:auto; 
background-image:url("img/googlet.png"); 
 }

 .Google:hover {
background-image:url("img/outlook.png"); 
 }

HTML:

 <div class="Row"> 
<a href="http://google.co.uk"> <div class="Google"></div> </a>
 </div>

Answer 1

您可以使用{display:block;}

来屏蔽标签

而不是像下面这样为悬停编写 css。

a:hover .Google {background-image:url("img/outlook.png");}