css - 带链接的 HTML 列表样式

Question

我有一个菜单，它由一个无序列表组成，样式看起来像一个网格，当鼠标悬停在它上面时，网格框会改变颜色。干净利落。我的问题是，当我在 li 中添加指向文本的链接时，悬停基本上会中断。 (引用下面的 Fiddle 以及链接和非链接之间的悬停有何不同 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

所有 anchor (a) 标签在文本颜色方面都有默认样式(不同于 span 标签，后者从其父级继承颜色)。在相关代码中，您将 color 应用于 li 元素，当它悬停时，仅当 a 元素 a 本身处于悬停状态。

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

代替上述，当 li 悬停时，也将 color 应用于 a 元素。这将解决悬停文本颜色问题。

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

---

要使整个网格框区域可点击，您需要将 anchor 的 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%;
}