CSS悬停不起作用

问题描述：

我正在通过jQuery在我的网站上制作一个标签式导航菜单。所有单独的选项卡具有类navBarLink，这里是属于它的CSS：CSS悬停不起作用

.navBarLink:link,.navBarLink:visited 
{ 
display:block; 
height:27px; 
width:120px; 
color:#FFF; 
background-color:#06C; 
text-align:center; 
padding:4px; 
text-decoration:none; 
border:0; 
margin:2px 2px 0 2px; 
} 
.navBarLink:hover,.navBarLink:active 
{ 
background-color:#FFF; 
color:#06C; 
border-bottom-style:solid; 
border-bottom-color:#FFFFFF; 
border-bottom-width:1px; 
}

的问题是，当我点击选项卡上，但是当我将鼠标悬停在选项卡上不改变背景颜色的变化。基本上我的悬停和我的点击不能同时工作。任何想法为什么发生这种情况？

打开你最喜欢的页面调试器（chrome dev/firebug/ie开发工具），选择元素，看看如何呈现CSS。 – asawyer 2012-04-10 21:41:22

它似乎工作。 http://jsfiddle.net/st46b/ – mikevoermans 2012-04-10 21:42:10

'.navBarLink'是'a'元素吗？如果不是，那可能是问题所在。我知道至少有一些版本的IE不会使用'：hover'规则，除非它们被应用到'a'元素。 – 2012-04-10 21:42:53

答

http://jsfiddle.net/UnFhQ/

这工作。（我从第一个CSS代码中删除了：链接，只是为了让我可以看到div的背景色...）但点击这个并让我们知道代码不起作用。谢谢

+1：我以前从未见过jsfiddle.net。我喜欢！ – 2012-04-10 22:02:52

哈哈，雅男人它与Stackoverflow一起工作奇迹......我在这个网站上越来越多地看到它，它使得“为什么不用这个代码工作”的问题更容易调试和验证。 – 2012-04-10 22:06:44

http://tinkerbin.com/也非常棒。 – asawyer 2012-04-10 23:10:09

CSS悬停不起作用

相关推荐