CSS多個懸停按鈕問題

-1

這裏的問題是，我希望列表中的所有元素都位於彼此之下，而不是存在空間，並且我不希望每次移動都會在移動時彈出超過1個按鈕，只是相應的對應按鈕。CSS多個懸停按鈕問題

CSS：

#uphead {list-style: none; font-weight: bold; font-size: 15px; padding: 5px 0px;} 
#partnumbers {list-style-type: none;} 
#partnumbers a {padding: 2px 10px; width: 220px; display:block;} 
#partnumbers li {list-style-type: none; float: left; width: 220px;} 
#partnumbers li ul {position: relative; padding: 10px 0px 10px 0px; float:left; z-index:20;} 
#pn {display: none; background: url('../../../images/pn_box.png'); background-repeat: no-repeat; background-size: 200px 40px; height: 40px; width: 150px; position: relative; z-index: 20; margin: -40px 225px;} 
#partnumbers:hover li ul li{display: block; padding: 10px 30px 0px; position: relative; z-index: 500; opacity: 0.9;} 
.odd {background:#f4f3f0;} 
.even {background:#eae9e6;}

HTML：

<div id="underpic"> 
<ul id="uphead"> 
    <li> 
     iPhone 4 &amp; 4s</li> 
</ul> 
<ul id="partnumbers"> 
    <li> 
     <a class="even">MSR</a> 
     <ul> 
      <li id="pn"> 
       LP4MS - PH4</li> 
     </ul> 
    </li> 
    <li> 
     <a class="odd">MSR, 1D Scanner</a> 
     <ul> 
      <li id="pn"> 
       LP4 - PH4</li> 
     </ul> 
    </li> 
    <li> 
     <a class="even">MSR, 1D Scanner with Bluetooth</a> 
     <ul> 
      <li id="pn"> 
       LP4BT - PH4</li> 
     </ul> 
    </li> 
    <li> 
     <a class="odd">MSR, 2D Code Scanner</a> 
     <ul> 
      <li id="pn"> 
       LP4C2D - PH4</li> 
     </ul> 
    </li> 
    <li> 
     <a class="even">MSR, 2D Code Scanner with Bluetooth</a> 
     <ul> 
      <li id="pn"> 
       LP4C2DBT - PH4</li> 
     </ul> 
    </li> 
</ul>

來源

2013-08-22 Adjit

修復1：從#partnumbers li ul

修復2取出填充：更改#partnumbers:hover li ul li到#partnumbers li:hover ul li

我會嘗試複製大部分我所扮演的風格，但我可能錯過了一些，還我只使用Firefox特定的前綴，你需要添加所有的瀏覽器要支持的前綴：

#partnumbers { 
    list-style-type: none; 
} 
#partnumbers > li { 
    list-style-type: none; 
    position: relative; 
    width: 220px; 
    border: 1px solid #CECDCB; 
} 

#partnumbers a { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    display: block; 
    padding: 2px 10px; 
    width: 100%; 
} 

#partnumbers li ul { 
    bottom: 0; 
    position: absolute; 
    right: 100%; 
    top: -7px; 
    z-index: 20; 
} 
#partnumbers li:hover ul li { 
    display: block; 
    opacity: 0.9; 
    padding: 10px 20px 10px 10px; 
    position: relative; 
    z-index: 500; 
} 
#pn { 
    background: url("http://www.metsales.com/MetropolitanSales/microsite/ipc/images/pn_box.png") no-repeat scroll 0 0/100% 100% transparent; 
    display: none; 
    position: relative; 
    white-space: nowrap; 
    z-index: 20; 
}

來源

2013-08-22 19:39:51

謝謝！非常感激。 – Adjit

這裏有一個修復jsFiddle：http://jsfiddle.net/mWACL/ –

如果我也想要在每個框周圍的邊框我怎麼能這樣做呢？我繼續嘗試，但它並沒有圍繞每個李......我也無法讓填充在每個「按鈕」上正常工作（我想將它延伸到左側） – Adjit

這應該是CSS代碼...

#uphead {list-style: none; font-weight: bold; font-size: 15px; padding: 5px 0px;} 
#partnumbers {list-style-type: none;} 
#partnumbers a {padding: 2px 10px; width: 220px; display:block;} 
#partnumbers li {list-style-type: none; float: left; width: 220px;} 
#partnumbers li ul {position: relative; float:left; z-index:20;} 
#pn {display: none; background: url('../../../images/pn_box.png'); background-repeat: no-repeat; background-size: 200px 40px; height: 40px; width: 150px; position: relative; z-index: 20; margin: -40px 225px;} 
#partnumbers li:hover ul li{display: block; padding: 10px 30px 0px; position: relative; z-index: 500; opacity: 0.9;} 
.odd {background:#f4f3f0;} 
.even {background:#eae9e6;}

來源

2013-08-22 19:44:43 estereofonico

CSS多個懸停按鈕問題

回答

相關問題