我的菜单影响href图像

当我添加链接到图像（href）时，菜单样式会影响我的图像，请注意紫色影响谷歌图像。我的菜单影响href图像

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul 
{ float:left; width:100%; padding:0; margin:0; list-style-type:none;} 
a { float:left; width:6em; text-decoration:none; color:white; background-color:purple; 
padding:0.2em 0.6em; border-right:1px solid white; } 
a:hover 
{background-color:#ff3300;} 
li {display:inline;} 
</style> 
</head> 

<body> 
<ul> 
<li><a href="#">Link one</a></li> 
<li><a href="#">Link two</a></li> 
<li><a href="#">Link three</a></li> 
<li><a href="#">Link four</a></li> 
</ul> 

<p> 
body text 
</p> 
<a href="test.php" target="_blank"><img src="http://www.google.se/images/google_80wht.gif" 

</body> 
</html>

来源

2013-07-31 user2636507

您定义的CSS规则适用于您的导航链接和包含Google图片的test.php链接。如果您打算仅使用该规则定位导航链接，则有多种方法，但通常您会将类应用于包含导航的元素，然后更改导航链接的规则以仅应用该类所在的位置。这样的事情：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul 
{ float:left; width:100%; padding:0; margin:0; list-style-type:none;} 
ul.nav a { float:left; width:6em; text-decoration:none; color:white; background-color:purple; 
padding:0.2em 0.6em; border-right:1px solid white; } 
ul.nav a:hover 
{background-color:#ff3300;} 
li {display:inline;} 
</style> 
</head> 

<body> 
<ul class="nav"> 
<li><a href="#">Link one</a></li> 
<li><a href="#">Link two</a></li> 
<li><a href="#">Link three</a></li> 
<li><a href="#">Link four</a></li> 
</ul> 

<p> 
body text 
</p> 
<a href="test.php" target="_blank"><img src="http://www.google.se/images/google_80wht.gif" 

</body> 
</html>

来源

2013-07-31 05:40:17 jandersen

哇，你真棒，谢谢@janderson – user2636507

多一个问题，@jandersen我失去了悬停属性。只是谷歌似乎回应它 – user2636507

是的，我注意到，我发布答案后，只有一两分钟，然后更新上面。悬停规则应该是'ul.nav a：hover'而不是'a：hover'。希望可以作为你的答案;-) – jandersen

我的菜单影响href图像

回答

相关问题