我使用 CSS 为网站创建了一个子菜单。但我想在鼠标悬停时更改菜单文本颜色。但是,当我将代码更改为“使其工作”时,子菜单中的其他文本颜色会发生变化。
问题1 CSS代码
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
ul#header_menu {
list-style: none;
position: relative;
display: inline-table;
border-bottom: 1px solid #ccc;
width: 100%;
}
ul:after {
content: ""; clear: both; display: block;
}
ul li {
float: left;
padding-right: 10px;
}
ul li:hover a {
color: #1583BE;
transition: color .16s linear;
}
ul li:hover {
color: #1583BE;
transition: color .16s linear;
}
ul li a {
display: block;
color: black;
text-decoration: none;
font-size: 1.3em;
}
ul ul {
background: white;
padding: 0;
position: absolute;
top: 100%;
width: 100px;
border: 1px solid #ccc;
}
ul ul li {
border-bottom: 1px solid #ccc;
float: none;
position: relative;
list-style-type: none;
}
ul ul li a {
font-size: 1.2em;
}
ul ul li a:hover {
color: #1583BE;
transition: color .16s linear;
}
问题2 CSS代码
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
ul#header_menu {
list-style: none;
position: relative;
display: inline-table;
border-bottom: 1px solid #ccc;
width: 100%;
}
ul:after {
content: ""; clear: both; display: block;
}
ul li {
float: left;
padding-right: 10px;
}
ul li:hover a {
color: #1583BE;
transition: color .16s linear;
}
ul li:hover {
color: #1583BE;
transition: color .16s linear;
}
ul li a {
display: block;
color: black;
text-decoration: none;
font-size: 1.3em;
}
ul ul {
background: white;
padding: 0;
position: absolute;
top: 100%;
width: 100px;
border: 1px solid #ccc;
}
ul ul li {
border-bottom: 1px solid #ccc;
float: none;
position: relative;
list-style-type: none;
}
ul ul li a {
font-size: 1.2em;
}
ul ul li a:hover {
color: #1583BE;
transition: color .16s linear;
}
我现在已经添加了 jsfiddle。
问题 1 jsfiddle
问题2 jsfiddle
我试过让它工作但没有成功。 对不起,我有时英语不好。 感谢您的宝贵时间。
最佳答案
我从你的第一把 fiddle 开始工作。问题是你应用 :hover
的地方。所以如果你改变这部分(CSS 的第 22 行)
ul li:hover a {
color: #1583BE;
transition: color .16s linear;
}
对此
ul li a:hover {
color: #1583BE;
transition: color .16s linear;
}
如果我正确理解了您的问题,那么您的问题就解决了。
关于html - CSS。悬停时菜单文本颜色不变或菜单文本颜色变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23045369/