>我正在尝试使 id = "header_nav" 的元素在将鼠标悬停在类"header_nav"li 元素上时更改其高度
网页代码:
<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="subpagespython.php">Python</a></li>
<li><a href="subpagesweb_design.php">Web Design</a></li>
<li><a href="subpagesarma.php">ArmA Series</a></li>
</ul>
</li>
<li><a href="forumsforums_home.php">Forums</a></li>
<li><a href="support.php">Support</a>
<ul>
<li><a href="subpagescontact_us.php">Contact Us</a></li>
<li><a href="subpagesfaq.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;
}
任何帮助都是值得赞赏的,只是似乎无法弄清楚我哪里出了问题。
您只能在 CSS 中选择的元素的外观;无法再次在 DOM 树中进入 UP。因此,当.header_nav li:hover
选择.header_nav
内的li
时,您现在只能修改li
本身,而不能修改父.header_nav
。
如果你不能改变你的HTML结构,恐怕你必须使用JS。