类列表悬停更改不同的元素id答案

【问题标题】：Class list hover change different element id类列表悬停更改不同的元素id
【发布时间】：2013-11-12 22:09:01
【问题描述】：

当您将鼠标悬停在“header_nav”类 li 元素上时，我正在尝试让 id = "header_nav" 的元素改变其高度

HTML 代码：

<div class="header_nav" id="header_nav">
        <ul id="header_nav_mainmenu">
            <li><a href="index.php">Home</a></li>
            <li><a href="portfolio.php">Portfolio</a>
                <ul id="header_nav_submenu">
                    <li><a href="subpages\python.php">Python</a></li>
                    <li><a href="subpages\web_design.php">Web Design</a></li>
                    <li><a href="subpages\arma.php">ArmA Series</a></li>
                </ul>
            </li>
            <li><a href="forums\forums_home.php">Forums</a></li>
            <li><a href="support.php">Support</a>
                <ul>
                    <li><a href="subpages\contact_us.php">Contact Us</a></li>
                    <li><a href="subpages\faq.php">F.A.Q.</a></li>
                </ul>
            </li>
        </ul>
    </div>

CSS 代码：

.header_nav
{
    width: 80%; 
    background-color: #1F1F1F;
    float:left;
    left:1px;
    top:100px;
    border-radius: 6px;
    width:15%;
    height:135px;
    text-align: left;
    position: fixed;
    border:1px solid white;

}

.header_nav li
{
    list-style: none;
    display: block;
    position: relative;
    text-align: left;
    background-color: #1F1F1F;
    /*transition*/
    transition: background-color 1s;
    -webkit-transition:background-color 1s;
}

.header_nav li a
{
    text-decoration: none;
    color:white;
    font-size: 22px;
}

.header_nav li ul
{
    display: none;
    position: absolute;
}

.header_nav li:hover ul
{
    display: block;
    position: relative;
    left:0px;
}

.header_nav li:hover a
{
    background-color: #454545;
    font-weight: bold;
    color: #FFAE00;
}

.header_nav li:hover ul a
{
    margin-top:2px;
    color:white;
    background-color: transparent;
    font-weight: normal;
    /*transition*/
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
}
.header_nav li:hover ul li
{
    width:155px;
}

.header_nav li:hover #header_nav
{
    height:200px;
}

感谢任何帮助，只是似乎无法弄清楚我哪里出错了。

【问题讨论】：

考虑到您的#header_nav 中的几乎所有内容都是.header_nav li，您可以声明#header_nav:hover {height:200px}。

标签： html css class hover

【解决方案1】：

您只能更改您在 CSS 中选择的元素的外观；没有办法再次在 DOM 树中上升。因此，虽然.header_nav li:hover 选择了.header_nav 内的li，但您现在只能修改li 本身，而不是父.header_nav。

如果你不能改变你的HTML结构，恐怕你必须使用JS。

【讨论】：