Question

如何在悬停时将菜单类别颜色属性更改为橙色，而在悬停其他子项目时不保持橙色？这太难了还是我不够清楚？请告诉我。谢谢你的帮助。

<nav class="main-nav">
<ul>
<li class="menu-category">Title 1
<ul>
<a href="#"><li class="menu-item">Item 1</li></a>
<a href="#"><li class="menu-item">Item 2</li></a>
<a href="#"><li class="menu-item">Item 3</li></a>
<a href="#"><li class="menu-item">Item 4</li></a>
</ul>
</li>
<li class="menu-category">Title 2
<ul>
<a href="#"><li class="menu-item">Item 1</li></a>
<a href="#"><li class="menu-item">Item 2</li></a>
<a href="#"><li class="menu-item">Item 3</li></a>
<a href="#"><li class="menu-item">Item 4</li></a>
<a href="#"><li class="menu-item">Item 5</li></a>
</ul>
</li>
<li class="menu-category">Title 3
<ul>
<a href="#"><li class="menu-item">Item 1</li></a>
<a href="#"><li class="menu-item">Item 2</li></a>
<a href="#"><li class="menu-item">Item 3</li></a>
<a href="#"><li class="menu-item">Item 4</li></a>
<a href="#"><li class="menu-item">Item 5</li></a>
</ul>
</li>
<li class="menu-category">Title 4
<ul>
<a href="#"><li class="menu-item">Item 1</li></a>
<a href="#"><li class="menu-item">Item 2</li></a>
<a href="#"><li class="menu-item">Item 3</li></a>
<a href="#"><li class="menu-item">Item 4</li></a>
</ul>
</li>
</ul>
</nav>

Answer 1

最简单的方法是添加另一个仅包装标题的元素：

<li class="menu-category"><span class="menu-category-title">Title 1</span>

.menu-category-title:hover {
    color: orange;
}

http://jsfiddle.net/ExplosionPIlls/LmWk2/1/（对于TITLE1）

Answer 2

我的回答解决了悬停时颜色变化问题以及使链接的行为像按钮（像块一样）而不是文本链接的相关问题。

正如前一篇文章所指出的，将标题标签包装在容器中是个好主意，我选择了h4，但几乎所有东西都可以。此外，出于语义原因，列表项标签内的链接标记：

<nav class="main-nav">
    <ul>
        <li class="menu-category"><h4>Title 1</h4>
            <ul>
                <li class="menu-item"><a href="#">Item 1</a></li>
                <li class="menu-item"><a href="#">Item 2</a></li>
                <li class="menu-item"><a href="#">Item 3</a></li>
                <li class="menu-item"><a href="#">Item 4</a></li>
            </ul>
        </li>
        ...
        ...
        ...
    </ul>
</nav>

CSS的基本变化如下：

标题文字：

.main-nav ul li.menu-category h4 {
    margin: 0;
    display: inline-block;
    padding:5px 15px 8px 15px;
    font-weight: normal;
}
.main-nav ul li.menu-category h4:hover {
    color:#FB8521;
}

这里的技巧是将display: inline-block设置为包装标题文本的元素。因为我选择使用h4，所以我需要将边距清零并将font-weight设置为normal以与之前的样式保持一致。此外，添加填充以使文本区域变大，这样您就可以触发悬停效果而不会实际将鼠标悬停在文本上。

对于子菜单项，将a标记设置为display: block，这样链接的活动区域就会填充子菜单面板的宽度。根据需要添加填充。

.menu-category .menu-item a {
    display: block;
    padding: 5px 15px;
}
.menu-category .menu-item a:hover {
    color:#FB8521;
}

您可以在http://jsfiddle.net/audetwebdesign/jvgkG/

查看工作演示

<强> PS

这种布局在悬停如何工作方面具有灵活性。当我将鼠标放到辅助菜单项上时，我认为标题文本会恢复为白色，但我可以将其设置为当您在辅助菜单上移动时标题保持橙色。

此外，您可以根据需要设置默认链接颜色的样式。

在悬停时将CSS菜单标题悬停属性更改为橙色

2 个答案: