錯誤行爲與：懸停

Question

當您將鼠標懸停在區域<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>

Answer 1

你只需要刪除這些：

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

Answer 2

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

Answer 3

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

Answer 4

在上面，你答對了。 只是標籤，看起來像有一個增強，使紅色部分的寬度一旦徘徊而改變。 在下面的菜單下改變寬度應該是220px。

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