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

概述我有一个简单的UL列表，当您将鼠标悬停在下面的HTML中的更多列表项中时，它将取消隐藏它的子菜单并显示它。 我需要做的是在显示和悬停子菜单后更改实际更多CSS的CSS。 所以，如果您将鼠标悬停在更多的子菜单上，您可以将鼠标悬停在该子菜单上。在这一点上，我需要更改这个子菜单的父级的CSS，这将是具有更多文本的菜单。 如果你知道如何做这个没有Javascript，我会很乐意知道..也许它甚至不可能没有 我有一个简单的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/

总结

以上是内存溢出为你收集整理的html – 当悬停CSS列表项目时,更改父项目CSS全部内容，希望文章能够帮你解决html – 当悬停CSS列表项目时,更改父项目CSS所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。