如何改變在懸停嵌套列表的個體列表項的背景色（與完整菜單寬度）

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type='text/css' media='all'> 
     #menu {width: 50%;} 
     .high {background: #0F0;} 
     .list-item :hover {background: #000;} 

     /* non essential styles */ 
     .list-item a{text-decoration: none;} 
     .list-item :hover a{color: #FFF;} 
    </style> 
</head> 
<body> 
    <div id="menu" > 
     <ul> 
      <li class="list-item"> 
       <div class="level-0 high" id="P0"> 
        <a href="#">P0</a> 
       </div> 
       <ul> 
        <li class="list-item"> 
         <div class="level-1" id="C0-P0"> 
          <a href="#">C0-P0</a> 
         </div> 
        </li> 
        <li class="list-item"> 
         <div class="level-1" id="C1-P0"> 
          <a href="#">C1-P0</a> 
         </div> 
        </li> 
       </ul> 
      </li> 
      <li class="list-item"> 
       <div class="level-0" id="P1"> 
        <a href="#">P1</a> 
       </div> 
       <ul> 
        <li class="list-item"> 
         <div class="level-1" id="C0-P1"> 
          <a href="#">C0-P1</a> 
         </div> 
        </li> 
        <li class="list-item"> 
         <div class="level-1" id="C1-P1"> 
          <a href="#">C1-P1</a> 
         </div> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</body>

結構：
P0
__ C0-P0
__ C1-P0
P1
__ C0-P1
__ C1-P1

目前我無法選擇和更改backg圓形（懸停時）Child項目單獨。
但是，如果我嘗試使用first-child選擇器 - 我可以單獨選擇每個列表項目。但是 -
那麼父級的選擇僅限於錨點寬度而不是完整的菜單寬度。

這裏的JSFilldle

來源

2012-12-22 Ujjwal Singh

這裏是一個HTTP的jsfiddle：// jsfiddle.net/4S7fD/然而，我仍然不明白w你問的帽子。 –

嘗試'.list-item div：hover' http://jsfiddle.net/4FZsa/1/ – Yoshi

@Yoshi - 它的工作:) –

改變這一行：

.list-item :hover {background: #000;}

這樣：

li .list-item :hover {background: #000;}

這裏的jsFiddle ...

來源

2012-12-22 23:33:43 PrimosK

現在'P0'＆'P1'不可選。 –

我更新了jsFiddle ... – PrimosK

這不是真的清楚你問什麼，但不應該有:hover和元素之間的空間。

應該.list-item:hover {...}不.list-item :hover {...}

來源

2012-12-22 23:32:33 bookcasey

如何改變在懸停嵌套列表的個體列表項的背景色（與完整菜單寬度）

回答

相關問題