通過在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 
}