当前位置：文江博客话题详情

当鼠标悬停在子级上时，保留：对父级的悬停效果

发布于 2024-12-26 10:19:28 字数 272 浏览 4 评论 0原文

我的菜单出现了新问题。

我想当鼠标悬停在子级上时保持父级悬停效果处于活动状态。

我知道我也许可以使用 jQuery？但如果可能的话，我真的想将它保留在 CSS 中。

并且不必为所有元素提供唯一的 id ...

http://forevertan.dk/_temp /eventfest/3/test3.htm

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

懒猫 2025-01-02 10:19:28

将 :hover 选择器放在 li 元素上，而不是锚点

#navMain li:hover > a{
    background-color: black;
}

http://jsfiddle.net/ 293mV/

Put the :hover selector on the li element rather than the anchor

#navMain li:hover > a{
    background-color: black;
}

http://jsfiddle.net/293mV/

回复收藏 0 原文

能怎样 2025-01-02 10:19:28

如果你想使用仅 CSS 的方式，我强烈推荐你，你将不得不稍微改变你的标记。
当您检查 a 的父级（li）上的 :hover 时，a 仍将位于 >:hover 当您进入子菜单时。
基本上我们正在这样做：

ul#nav li > a {
    /* all the normal state styling here */
}
ul#nav li:hover > a {
    /* hover state styling here */
}

我们将 a 扩展到 li 的维度。因此，li 的行为似乎与 a 类似。唯一的区别是，li 是a 和子菜单ul 的父菜单。

这里是 JSFiddle。

HTML 保持不变：

<ul id="nav">
    <li>
        <a href="#test">Test</a>
        <ul>
            <li>
                <a href="#test/sub">Sub</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#test">Test</a>
        <ul>
            <li>
                <a href="#test/sub">Sub</a>
            </li>
        </ul>
    </li>
</ul>

CSS 发生变化：

ul#nav > li {
    padding: 0;
    margin: 0;

    float: left;
    position: relative;
}
ul#nav li > a {
    height: 30px;
    min-width: 80px;
    padding: 0;
    margin: 0;
    border-right: 1px solid #CCC;
    border-left: 1px solid #CCC;

    display: block;

    background: #000;

    color: #FFF;
    text-align: center;
    line-height: 30px;
    white-space: nowrap;
}
ul#nav li:hover > a {
    background: #FFF;

    color: #000;
}
ul#nav > li ul {
    display: none;
    position: absolute;
}
ul#nav > li:hover ul {
    display: block;
}
ul#nav > li ul li {
    display: block;
}.

If you want to use a CSS only way, what I highly recommend to you, you would have to change your markup a little bit.
When you check for :hover on a's parent (the li) a will still be on :hover when you go down the submenu.
Basically we're doing this:

ul#nav li > a {
    /* all the normal state styling here */
}
ul#nav li:hover > a {
    /* hover state styling here */
}

We will expand the a to the dimensions of the li. So the li seems to behave like the a. The only difference is, that the li is the parent of the a and the submenu ul.

JSFiddle here.

HTML stays the same:

<ul id="nav">
    <li>
        <a href="#test">Test</a>
        <ul>
            <li>
                <a href="#test/sub">Sub</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#test">Test</a>
        <ul>
            <li>
                <a href="#test/sub">Sub</a>
            </li>
        </ul>
    </li>
</ul>

CSS changes:

ul#nav > li {
    padding: 0;
    margin: 0;

    float: left;
    position: relative;
}
ul#nav li > a {
    height: 30px;
    min-width: 80px;
    padding: 0;
    margin: 0;
    border-right: 1px solid #CCC;
    border-left: 1px solid #CCC;

    display: block;

    background: #000;

    color: #FFF;
    text-align: center;
    line-height: 30px;
    white-space: nowrap;
}
ul#nav li:hover > a {
    background: #FFF;

    color: #000;
}
ul#nav > li ul {
    display: none;
    position: absolute;
}
ul#nav > li:hover ul {
    display: block;
}
ul#nav > li ul li {
    display: block;
}.

回复收藏 0 原文