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立方体的一面。 

目前为止看起来如此：http://jsfiddle.net/RWwXE/

我有点用span创建了较小的菜单（包含HTML，CSS，PHP），但是我无法向它们添加a标记，因为它们到处都是，而且我无法追踪它为什么会发生。

我尝试使用css中的li将第一个链接粘贴到li>a元素，这样它就不会影响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 { ... }的{{1}}中重复样式。你只需要包含那些需要改变的东西，我已经在你的jsFiddle中为你做了这个

根据以下评论

修改

如果您只是希望将它们链接到其他页面（在类别链接中），则可以使用内联a:hover { ... }作为容器，并使用常规锚标记作为链接列表。这是因为锚标签不应该嵌套在彼此之中

Demo

将鼠标悬停在其他悬停链接上的链接上

1 个答案: