html - 类列表悬停改变不同的元素id

Question

当您将鼠标悬停在类“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;
}

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

Answer 1

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

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