2012-04-10 165 views
-1

我正在通过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; 
} 

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

+0

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

+0

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

+2

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

回答

1

http://jsfiddle.net/UnFhQ/

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

+0

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

+0

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

+0

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