[英]CSS. Menu text color not changing on hover OR menu text color changing
I have created a sub menu for a website using CSS. 我已经使用CSS为网站创建了子菜单。 But I want to change menu text color on mouse hover.
但是我想在鼠标悬停时更改菜单文本的颜色。 But when I change the code to 'make it work' the other text color in the sub menu changes.
但是,当我更改代码以使其“起作用”时,子菜单中的其他文本颜色也会更改。
Problem 1 CSS code 问题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;
}
Problem 2 CSS code 问题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;
}
I have added jsfiddle now. 我现在添加了jsfiddle。
Problem 1 jsfiddle 问题1 jsfiddle
http://jsfiddle.net/LsjCS/ http://jsfiddle.net/LsjCS/
Problem 2 jsfiddle 问题2 jsfiddle
http://jsfiddle.net/5pjUu/ http://jsfiddle.net/5pjUu/
I have tried to make it work but not successfully. 我试图使它工作,但没有成功。 Sorry for my, sometimes, poor English.
对不起,有时我的英语不好。 Thank you for your time.
感谢您的时间。
I worked from your first fiddle. 我从你的第一提琴开始。 The problem is where you apply the
:hover
on. 问题是您在
:hover
上应用。 So if you change there this part (line 22 of the CSS) 因此,如果您在此处更改此部分(CSS的第22行)
ul li:hover a {
color: #1583BE;
transition: color .16s linear;
}
to this 对此
ul li a:hover {
color: #1583BE;
transition: color .16s linear;
}
If I understood your question correctly, then that solves your problem. 如果我正确理解了您的问题,那么就可以解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.