当您将鼠标悬停在<li>
区域上时,它会变为红色,但<a>
内的区域仍为白色。当我指向她时,区域<a>
变红了。这是分开发生的。
如何解决这个问题?如何使整个区域的悬停区<li>
变红?
.menu {
z-index: 100;
width: 230px;
position: relative;
vertical-align: top;
display: inline-block;
background-color: #fff;
}
.menu * {
text-decoration: none;
font-size: 16px;
background-color: #fff;
}
.menu ul {
margin: 0;
padding-left: 10px;
list-style: none;
}
.menu ul li {
padding: 3px 0px 3px 10px;
color: #000;
display: block;
transition: all 0.5s ease 0.05s;
-webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li a {
display: block;
color: #000;
}
.menu ul li:hover {
background: #e50003;
}
.menu ul li.active > a {
text-decoration: none;
}
.menu ul li a:hover {
text-decoration: none;
color: #fff;
background: #e50003;
}
.menu ul li .submenu {
display: none;
position: absolute;
width: 100%;
min-height: 100%;
top: 0;
left: 100%;
background: #ddd;
border-width: 0px 0px 0px 1px;
border-style: solid;
border-color: #bbb;
}
.menu ul li:hover > .submenu {
background-color: white;
display: block;
position: absolute;
left: 220px;
width: 250px;
top: 0;
z-index: 99;
transition: all 0.5s ease 0.05s;
-webkit-transition: all 0.5s ease 0.05s;
}
<div class="menu">
<ul>
<li class="active">
<a href="#">Пункт 1</a>
<div class="submenu submenu1">
<ul>
<li class="active">
<a href="#">Пункт 2</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
答案 0 :(得分:3)
你只需删除它们:
.menu * {
background-color: #fff;
}
.menu ul li a:hover {
text-decoration: none;
color: #fff;
background: #e50003;
}
.menu {
z-index: 100;
width: 230px;
position: relative;
vertical-align: top;
display: inline-block;
background-color: #fff;
}
.menu * {
text-decoration: none;
font-size: 16px;
/* background-color: #fff; */
}
.menu ul {
margin: 0;
padding-left: 10px;
list-style: none;
}
.menu ul li {
padding: 3px 0px 3px 10px;
color: #000;
display: block;
transition: all 0.5s ease 0.05s;
-webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li a {
display: block;
color: #000;
}
.menu ul li:hover {
background: #e50003;
}
.menu ul li.active > a {
text-decoration: none;
}
/*.menu ul li a:hover {
text-decoration: none;
color: #fff;
background: #e50003;
}*/
.menu ul li .submenu {
display: none;
position: absolute;
width: 100%;
min-height: 100%;
top: 0;
left: 100%;
background: #ddd;
border-width: 0px 0px 0px 1px;
border-style: solid;
border-color: #bbb;
}
.menu ul li:hover > .submenu {
background-color: white;
display: block;
position: absolute;
left: 220px;
width: 250px;
top: 0;
z-index: 99;
transition: all 0.5s ease 0.05s;
-webkit-transition: all 0.5s ease 0.05s;
}
&#13;
<div class="menu">
<ul>
<li class="active">
<a href="#">Пункт 1</a>
<div class="submenu submenu1">
<ul>
<li class="active">
<a href="#">Пункт 2</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
&#13;
答案 1 :(得分:0)
您需要在child
元素上悬停时设置parent
元素的背景,这是您的情况。
.menu ul li:hover,
.menu ul li:hover > a{
background: #e50003;
color: #fff;
}
.menu {
z-index: 100;
width: 230px;
position: relative;
vertical-align: top;
display: inline-block;
background-color: #fff;
}
.menu * {
text-decoration: none;
font-size: 16px;
background-color: #fff;
}
.menu ul {
margin: 0;
padding-left: 10px;
list-style: none;
}
.menu ul li {
padding: 3px 0px 3px 10px;
color: #000;
display: block;
transition: all 0.5s ease 0.05s;
-webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li a {
display: block;
color: #000;
transition: all 0.5s ease 0.05s;
-webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li:hover,
.menu ul li:hover > a{
background: #e50003;
color: #fff;
}
.menu ul li.active > a {
text-decoration: none;
}
.menu ul li a:hover {
text-decoration: none;
color: #fff;
}
.menu ul li .submenu {
display: none;
position: absolute;
width: 100%;
min-height: 100%;
top: 0;
left: 100%;
background: #ddd;
border-width: 0px 0px 0px 1px;
border-style: solid;
border-color: #bbb;
transition: all 0.5s ease 0.05s;
-webkit-transition: all 0.5s ease 0.05s;
}
.menu ul li:hover > .submenu {
background-color: white;
display: block;
position: absolute;
left: 220px;
width: 250px;
top: 0;
z-index: 99;
}
&#13;
<div class="menu">
<ul>
<li class="active">
<a href="#">Пункт 1</a>
<div class="submenu submenu1">
<ul>
<li class="active">
<a href="#">Пункт 2</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
&#13;
答案 2 :(得分:0)
.menu ul li.active > a:hover,
.menu ul li.active > a
{
background-color:transparent;
}
答案 3 :(得分:0)
上面你得到了正确的答案。 只是标记,看起来有一个增强,使红色部分的宽度在悬停时发生变化。 变化宽度应该是220px以下.menu如下。
.menu {
z-index: 100;
width: 220px;
position: relative;
vertical-align: top;
display: inline-block;
background-color: #fff;
}