HTML列表樣式鏈接

Question

我有一個菜單，包含一個無序列表，樣式看起來像一個網格，網格框在鼠標懸停在上面時會改變顏色。乾淨利落。我的問題是當我添加一個鏈接到li裏面的文本時，懸停基本上就會中斷。 （請參閱下面的小提琴以供參考，以及鏈接和非鏈接之間的懸停方式如何不同li）

我需要將鏈接樣式設置爲與懸停在網格上時的無風格文本相同的樣式，而不僅僅是實際的鏈接並使整個網格框區域可點擊。

我一直在搞它一段時間，但不能讓它按我想要的方式工作。

<style> 
.admin-panel { 
    overflow: hidden; 

    li { 
     float: left; 
     width: 33%; 
     height: 115px; 
     padding: 10px; 
     line-height: 1.4; 
     text-align: center; 
     background-color: #f9f9f9; 
     border: 1px solid #fff; 
    } 

    li:hover, li a:hover { 
     color: #fff; 
     background-color: #778ba1; 
    } 

    .glyphicon { 
     margin-top: 5px; 
     margin-bottom: 10px; 
     font-size: 24px; 
    } 

    .admin-panel-class { 
     display: block; 
     text-align: center; 
     -ms-word-wrap: break-word; 
     word-wrap: break-word; 
    } 
} 
</style> 

<div class="admin-panel"> 
    <ul class="admin-panel-list"> 
     <li> 
      <a href="#"> 
       <span class="glyphicon glyphicon-list-alt"></span> 
       <span class="admin-panel-class">My Workshops</span> 
      </a> 
     </li> 
     <li> 
      <span class="glyphicon glyphicon-star"></span> 
      <span class="admin-panel-class">Create Workshop</span> 
     </li> 
     <li> 
      <span class="glyphicon glyphicon-pencil"></span> 
      <span class="admin-panel-class">Edit Workshop</span> 
     </li> 
     <li> 
      <span class="glyphicon glyphicon-asterisk"></span> 
      <span class="admin-panel-class">Resource Allocation</span> 
     </li> 
     <li> 
      <span class="glyphicon glyphicon-ok"></span> 
      <span class="admin-panel-class">Reservation Approval</span> 
     </li> 
     <li> 
      <span class="glyphicon glyphicon-ok"></span> 
      <span class="admin-panel-class">Facilities Reservation Approval</span> 
     </li> 
     <li> 
      <span class="glyphicon glyphicon-calendar"></span> 
      <span class="admin-panel-class">Room Calendars</span> 
     </li> 
     <li> 
      <span class="glyphicon glyphicon-stats"></span> 
      <span class="admin-panel-class">Global Reports</span> 
     </li> 
     <li> 
      <span class="glyphicon glyphicon-phone"></span> 
      <span class="admin-panel-class">Sing-In Tablets</span> 
     </li> 
     <li> 
      <span class="glyphicon glyphicon-th-list"></span> 
      <span class="admin-panel-class">Menu Editor</span> 
     </li> 
     <li> 
      <span class="glyphicon glyphicon-user"></span> 
      <span class="admin-panel-class">Edit Users</span> 
     </li> 
    </ul> 
</div> 

Fiddle

Answer 1

所有錨（a）標籤都有默認樣式，當涉及到文字顏色（不同於span標籤來繼承父顏色）。在提供的代碼中，您將color應用於li元素時，只有在a自身處於懸停狀態時，纔會將元素應用到a元素。

li:hover, li a:hover { 
    color: #fff; 
    background-color: #778ba1; 
} 

代替上述的，應用color到a元件也當li懸停上。這將修復懸停文字顏色問題。

li:hover, li:hover a { 
    color: #fff; 
    background-color: #778ba1; 
} 

---

爲了使整個網格框區域爲可點擊，您就需要錨的display屬性設置爲任何block或inline-block，並給它100％的寬度和家長的高度。請注意，這仍然會使網格的padding區域不可點擊。

.admin-panel-list li a{ 
    display: inline-block; 
    height: 100%; 
    width: 100%; 
} 

如果需要填補區域也可點擊然後從li取出填充，並將其添加到a，而不是（像如下）：

.admin-panel-list li a { 
    display: inline-block; 
    padding: 10px; 
    height: 100%; 
    width: 100%; 
}