通过在CSS中悬停另一个元素来定位元素

Question

如何在悬停时定位一个元素，然后生成其他元素？

这里的HTML：

 <header> 
      <h1 style="float: left; margin-top: 2%;">&nbsp;&nbsp;&nbsp;Naughty Mama.</h1> 
      <nav> 
       <ul> 
        <li><a href="profile.php">My Profile</a></li> 
        <li><a href="inbox.php">Inbox</a></li> 
        <li><a href="notifications.php">Notifications</a></li> 
       </ul> 
      </nav> 
     </header> 

这里的CSS：

@CHARSET "ISO-8859-1"; 

header { 
    background-color: #ddd; 
} 

nav { 
    float: right; 
    margin-right: 5%; 
    margin-top: 2%; 
} 

nav ul li{ 
    display: inline; 
    padding: 15px; 
    background-color: #eee; 
} 

nav ul li a { 
    color: #fff; 
    text-decoration: none; 
} 

nav ul li a:hover { 
    color: #000; 
} 

我想实现nav ul li当我将鼠标悬停在nav ul li a。

希望我清楚。

Answer 1

您可能需要<a>，因此它涵盖了<li>。申请悬停效果为背景，以<a> :) http://codepen.io/anon/pen/zyDLA

header { 
    background-color: #ddd; 
} 

nav { 
    float: right; 
    margin-right: 5%; 
    margin-top: 2%; 
} 

nav ul li{ 
    display: inline-block; 
    background-color: #eee; 
    vertical-align:top; 
} 

nav ul li a { 
    color: #fff; 
    text-decoration: none; 
    display:block; 
    padding:15px; 
} 

nav ul li a:hover { 
    color: #000; 
    background:#48a 
}