将鼠标悬停在其他悬停链接上的链接上[关闭]

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/

我用span 创建了一个较小的菜单（由HTML、CSS、PHP 组成），但我不能给它们添加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