a:hover或#menubar:hover不适用于header
a:hover或#menubar:hover不适用于header
提问于 2015-05-02 10:52:01
我在使用a:hover元素时遇到了问题。我是个业余爱好者，所以请不要着急。我也尝试过使用#menubar:hover，但似乎也不起作用。
这段代码将进入另一个程序的头中。我这么做的唯一原因是为了让这个程序的标题看起来和网站完全一样。下面是我的头部代码。
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow;
}<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li><a href="http://www.losmariachisga.com">Home</a></li>
<li><a href="http://www.losmariachisga.com/meet-the-team">About Us</a></li>
<li><a href="http://www.losmariachisga.com/photo-galleries">Photos</a></li>
<li><a href="http://www.losmariachisga.com/calendar">Events</a></li>
<li><a href="http://www.losmariachisga.com/214-2">Specials</a></li>
</ul>
请帮帮我！
回答 4
Stack Overflow用户
发布于 2015-05-02 16:38:29
看看这个
#menubar li a:hover {
color: yellow;
}完整代码：
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
#menubar li a:hover{
color: yellow;
}<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li><a href="http://www.losmariachisga.com">Home</a></li>
<li><a href="http://www.losmariachisga.com/meet-the-team">About Us</a></li>
<li><a href="http://www.losmariachisga.com/photo-galleries">Photos</a></li>
<li><a href="http://www.losmariachisga.com/calendar">Events</a></li>
<li><a href="http://www.losmariachisga.com/214-2">Specials</a></li>
</ul>
Stack Overflow用户
发布于 2015-05-02 11:02:19
*{
margin: 0;
padding: 0;
font-family: arial;
font-size: 15px;
text-align: center;
}
#menubar,
#menubar ul{
list-style: none;
}
#menubar>li{
float: left;
}
#menubar li a{
display: table-cell;
height: 40px;
width:110px;
padding: 20pz;
text-decoration: none;
vertical-align: middle;
}
#menubar>li>a{
background-color: #303432;
color: #fff;
}
#menubar{
position: absolute;
top:100px;
left:400px;
}
a:hover {
color: yellow !important;
}<!DOCTYPE html>
<html>
<head>
<title>Menu Bar</title>
<link rel="stylesheet" type="text/css" href="style"
</head>
<body>
<ul id="menubar">
<li><a href="http://www.losmariachisga.com">Home</a></li>
<li><a href="http://www.losmariachisga.com/meet-the-team">About Us</a></li>
<li><a href="http://www.losmariachisga.com/photo-galleries">Photos</a></li>
<li><a href="http://www.losmariachisga.com/calendar">Events</a></li>
<li><a href="http://www.losmariachisga.com/214-2">Specials</a></li>
</ul>
在这里，标签的样式覆盖了悬停。因此，如果您将其放置为!important，则该样式将优先于其他样式，并且它将覆盖所有其他样式。只需放置！重要的颜色:黄色，它可以工作。
Stack Overflow用户
发布于 2015-05-02 11:18:28
我想看看我能不能在没有！重要性的情况下让它工作。问题是，将文本设置为白色的CSS选择器使用的是比悬停样式更具体的样式。要做到这一点，最好的方法是为悬停设置一个更好的特异性级别，这将使它能够工作。在悬停时使用此选项。
#menubar li a:hover {
color: yellow;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29997856
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号