错误行为与：悬停

当您将鼠标悬停在区域<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>

来源

2017-03-17 dmitriy

'.menu *'将'a'设置为白色背景。在您悬停之前，'li：hover'不会改变。考虑只需使用'.menu'。 –

你只需要删除这些：

.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; 
 
}

<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>

来源

2017-03-17 10:23:53

你错了，给一个更好看看^^ –

这可能是由我的电脑造成的。 – Kramer

你看到与问题相同的结果？尝试清理缓存 –

您需要设置，而霍夫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; 
 
}

<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>

来源

2017-03-17 10:24:07

@MarcoSalerno你能告诉我downvote的原因吗？ –

这个问题是一段错误的代码，他不需要修复，只是为了削减 –

如果你可以在不削减的情况下修复代码，那该怎么办？ –

.menu ul li.active > a:hover, 
.menu ul li.active > a 
{ 
background-color:transparent; 
}

来源

2017-03-17 10:27:57

在上面，你答对了。只是标签，看起来像有一个增强，使红色部分的宽度一旦徘徊而改变。在下面的菜单下改变宽度应该是220px。

.menu { 
    z-index: 100; 
    width: 220px; 
    position: relative; 
    vertical-align: top; 
    display: inline-block; 
    background-color: #fff; 
}

来源

2017-03-17 10:35:02 Arindam

错误行为与：悬停

回答

相关问题