html – 当悬停CSS列表项目时,更改父项目CSS

发布时间：2020-12-14 22:26:33 所属栏目：资源来源：网络整理

导读：我有一个简单的UL列表，当您将鼠标悬停在下面的HTML中的更多列表项中时，它将取消隐藏它的子菜单并显示它。我需要做的是在显示和悬停子菜单后更改实际更多CSS的CSS。所以，如果您将鼠标悬停在更多的子菜单上，您可以将鼠标悬停在该子菜单上。在这一点上，

我有一个简单的UL列表，当您将鼠标悬停在下面的HTML中的更多列表项中时，它将取消隐藏它的子菜单并显示它。

我需要做的是在显示和悬停子菜单后更改实际更多CSS的CSS。

所以，如果您将鼠标悬停在更多的子菜单上，您可以将鼠标悬停在该子菜单上。在这一点上，我需要更改这个子菜单的父级的CSS，这将是具有更多文本的菜单。

如果你知道如何做这个没有Javascript，我会很乐意知道..也许它甚至不可能没有JS？

<div id="nav-wrapper">
        <ul>

            <li><a href="">Link</a></li>

            <li><a href="">Link 5</a></li>

            <li><a href="">More</a>
                <ul>
                    <li><a href="">Sub Link 1</a></li>
                    <li><a href="">Sub Link 2</a></li>
                    <li><a href="">Sub Link 3</a></li>
                    <li><a href="">Sub Link 4</a></li>
                    <li><a href="">Sub Link 5</a></li>
                </ul>
            </li>

        </ul>
    </div>

CSS

<style type="text/css" media="screen">
#nav-wrapper ul {
    position:relative;
    width: 700px;
    float: right;
    margin: 0;
    list-style-type: none;
}
#nav-wrapper ul li {
    vertical-align: middle;
    display: inline;
    margin: 0;
    color: black;
    list-style-type: none;
}
#nav-wrapper ul li a {
    text-decoration: none;
    white-space: nowrap;
    line-height: 45px;
    font-size: 13px;
    color: #666;
    padding: 5px 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#nav-wrapper ul li a:hover {
    color: #fff;
    background-color: #4caef2;
}
#nav-wrapper ul li a:visited {
    color: #666;
}

/* Hide Sub-menus */
#nav-wrapper ul ul{
    display: none;
}
/* SHOW Sub-menus on HOVER */
#nav-wrapper ul li:hover ul{
    display: block;
    margin:-10px 0 0 0;
    padding:0px 20px 20px 20px;
    border-color:#fff;
    border:1px;
    border-style:solid;
    background:#FFF;
    position:absolute;

    top:45px;
    right: 320px;
    width: 420px;
}

</style>

解决方法

那么，尽管这些其他答案说了这么多，这是一种使用 adjacent selector的鬼鬼祟祟的方式。

HTML：

<ul>
    <li>
        <ul>
            <li>Sub Link 1</li>
            <li>Sub Link 2</li>
            <li>Sub Link 3</li>
        </ul>
        <a href="#">Menu</a>
    </li>
</ul>

CSS：

* { 
    margin: 0; 
    padding: 0; }
ul { list-style: none; }
ul > li { position: relative; }
ul li a { 
    height: 16px;
    display: block; }
ul ul { 
    position: absolute;
    top: 16px;
    left: 0;
    cursor: pointer;
    display: none; }
ul li:hover ul { display: block; }
ul ul:hover + a { color: red; }

预览：http://jsfiddle.net/Wexcode/YZtgL/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!