悬停在其他悬停链接上

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