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：悬停.Google {background-image：url（＆＃34; img / outlook.png＆＃34;）;}

IMG不会徘徊

1 个答案: