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选择li内的.header_nav时，您现在只能修改li本身，而不是父.header_nav。

如果你不能改变你的HTML结构，我担心你必须使用JS。

班级列表悬停更改不同的元素ID

1 个答案: