懸停在其他懸停鏈接上

Question

我有一個菜單，這是一個ul列表。每個按鈕都與background-image設置相關聯，每個項目的margin-top設置爲3.當您將鼠標懸停在按鈕上時，margin-top變爲0，並且background-image發生變化以防止閃爍（您可以在底部看到一個小陰影）。除此之外，我用-webkit-transition: margin-top 0.1s linear使動畫順利。

到目前爲止一切都很好，但現在我想在現有鏈接上添加3個鏈接。我已經完成了，所以文本只在類似3D的按鈕的頂部對齊，所以鏈接有一個padding:18 0 0 1，這樣我就可以創建一個只能覆蓋多維數據集頂端的div。 <!--Just a head's up-->

這是它的外觀到目前爲止：http://jsfiddle.net/RWwXE/

我已經有點形成的較小的菜單（其中包括HTML，CSS，PHP的）與span，但我不能a標籤添加到他們，因爲它到處都是，我無法追查它爲什麼會發生。

我試圖堅持第一鏈接到的CSS使用li>a的li元素，所以它不會影響我在span部分的鏈接，但是，是的，我有點糊塗了，現在爲什麼當我做他們作爲一個鏈接，他們在這個地方跳。剛開始學習這個，並陷入困境，非常抱歉，如果有人會解釋是否有可能，那麼會很高興，什麼是最好的解決方案？

一般來說，我希望大按鈕上懸停，並下方，讓我們說，將字體從灰色更改爲白色，所以基本上它是我想的2懸停效果。謝謝！

HTML：

<ul class="menu"> 
    <li> 
     <a href="categories.php"> 
      <div>Categories 
       <div id="cat"> 
        <span>HTML</span> 
        <span>CSS</span> 
        <span>PHP</span> 
       </div> 
      </div> 
     </a> 
    </li> 
    <li><a href="#"><div>Something</div></a></li> 
    <li><a href="#"><div>Else</div></a></li> 
</ul> 

CSS：

/* Menu */ 
.menu 
{ 
    width: 1000px; 
    height: 103px; 
    list-style: none; 
    margin: 0 0 5px 0; 
    padding: 0; 
} 

    /* Menu->Main Settings & Effects */ 
.menu li>a 
{ 
    width: 198px; 
    height: 100px; 
    margin: 3px 2px 0 0; 
    padding: 18px 0 0 1px; 
    float: left; 
    display: block; 
    text-decoration: none; 
    background: url(http://i.imgur.com/YBZHKcG.png); 
    background-repeat: no-repeat; 
    -webkit-transition: margin-top 0.1s linear; 
    -moz-transition: margin-top 0.1s linear; 
    -o-transition: margin-top 0.1s linear; 
    -ms-transition: margin-top 0.1s linear; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

    /* Menu->Front Face Text */ 
.menu li>a div 
{ 
    width: 186px; 
    height: 61px; 
    text-align: center; 
    color: #FFF; 
    font: 24px/61px Tahoma, Geneva, sans-serif; 
} 

    /* Menu->Effects */ 
.menu li>a:hover 
{ 
    width: 198px; 
    height: 103px; 
    margin: 0 2px 0 0; 
    padding: 18px 0 0 1px; 
    background: url(http://i.imgur.com/PVqqRqi.png); 
    background-repeat: no-repeat; 
    -webkit-transition: margin-top 0.1s linear; 
    -moz-transition: margin-top 0.1s linear; 
    -o-transition: margin-top 0.1s linear; 
    -ms-transition: margin-top 0.1s linear; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

.menu li>a.current 
{ 
    width: 198px; 
    height: 103px; 
    margin: 0 2px 0 0; 
    padding: 18px 0 0 1px; 
    background: url(http://i.imgur.com/PVqqRqi.png); 
    cursor: default; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

    /* Menu->Categories */ 
.menu #cat 
{ 
    width: 187px; 
    height: 20px; 
    color: #FFF; 
    font: 17px/20px Tahoma, Geneva, sans-serif; 
} 

.menu #cat span 
{ 
    float: left; 
    width: 62px; 
    color: #555; 
    border-top: 1px solid white; 
    border-right: 1px solid white; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

.menu #cat span:last-child 
{ 
    float: left; 
    width: 63px; 
    color: #555; 
    border-top: 1px solid white; 
    border-right: 1px solid white; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

Answer 1

我相信你正在尋找的效果something like this，但它並不完全清楚

如果是真的，你剛纔必須將:hover CSS應用於列表中的每個跨度（HTML，CSS和PHP）。我這樣做是通過給每個類添加一個單獨的類，因爲你提到每個類都有不同的懸停效果。如果你希望它們都具有相同的效果，然後使用相同的類

.menu #cat .sHTML:hover { 
    /* Effect on hover */ 
} 
.menu #cat .sCSS:hover { 
    /* Effect on hover */ 
} 
.menu #cat .sPHP:hover { 
    /* Effect on hover */ 
} 

側面說明，你真的應該使用白色空間，使您的CSS可讀性。該只有原因，你應該刪除空格是，如果你需要的文件大小下，當你把它投入生產

此外，CSS屬性可以繼承，因此您不必重複樣式在a { ... }中的a:hover { ... }。你只需要包括需要改變的那些，我在你的jsfiddle這樣做對你

編輯基於以下

評論如果你只是希望有它們鏈接到另一個頁面（在類別鏈接中），您可以對容器使用內嵌onclick="location.href='yourpage.php'"，併爲鏈接列表使用常規錨標記。這是因爲錨標籤不應該被嵌套對方

Demo