悬停时css整个菜单颜色更改
悬停时css整个菜单颜色更改
提问于 2013-07-09 17:17:26
我对html和css真的很陌生，我认为在学习教程的同时做一个项目可以帮助我在学习的同时保持动力。
我一直在玩这个菜单，它几乎就在那里--但现在似乎有一堵墙，我就是不知道如何克服它！我已经在几个网站上搜索了几个小时，现在准备把这个东西扔到窗外去……
这里有一个jsfiddle：http://jsfiddle.net/64Grv/
所以我想要实现的是，在悬停一个子菜单时，整个菜单都会改变颜色(而不是现在悬停的链接)。例如，如果我停留在“更多东西”上，所有的"menupoint2，东西，更多东西，甚至更多东西……“应该会改变颜色。
我该怎么做呢？我试着把不同的类放在一起，但都无济于事--我想我把它们放错了地方。或者这可以通过某种盒子来实现吗？
我为我的css的混乱表示道歉(只是一个初学者胡闹……)，如果有人有具体的提示如何做到这一点，我将非常感激:)
非常感谢!
CSS：
#navigation ul
{
margin:0px;
padding:0px;
position:relative;
text-align:center;
}
#navigation ul li
{
display:inline;
float:right;
line-height:20px;
list-style:none;
margin-right:3%;
margin-top:5%;
position:relative;
}
#navigation li a
{
display:block;
font-family: "Helvetica", "Arial", sans-serif;
font-size:1em;
color:#04B4AE;
text-decoration:none;
}
#navigation li a:hover
{
color:#08298A;
text-decoration:none;
}
#navigation li ul
{
font-size:0.8em;
background-color:transparent;
display:block;
margin:0px;
padding:0px;
top:0.5em;
}
#navigation li:hover ul
{
color:#04B4AE;
}
#navigation li li
{
vertical-align:middle;
list-style:none;
display:list-item;
margin:auto;
float:none;
}
#navigation li li a
{
color:#04B4AE;
text-decoration:none;
}
#navigation li li a:hover
{
color:#08298A;
text-decoration:none;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2013-07-09 17:21:26
您需要在li：http://jsfiddle.net/64Grv/1/上设置:hover
li:hover a {color:red}Stack Overflow用户
发布于 2013-07-09 17:27:59
试一试
li:hover a
{
color:yellow;
}Stack Overflow用户
发布于 2013-07-09 17:52:49
更新的提琴链接是下面刚刚更改的
替换下面的代码
#navigation li a:hover
color:#08298A;
text-decoration:none;
}使用的
#navigation li:hover a {
color:#08298A;
text-decoration:none;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17544458
复制相关文章
相似问题
腾讯云开发者
