HTML 带链接的列表样式

Question

我有一个菜单，其中包含一个样式看起来像网格的无序列表，当鼠标悬停在网格框上方时，网格框会改变颜色。干净利落。我的问题是当我向 li 内的文本添加 link 时，悬停基本上中断了。（请参阅下面的 Fiddle 以供参考，以及悬停在 link 和非 link li 之间有何不同）

我需要设置 link 的样式，使其在悬停在网格上时看起来与未设置样式的文本相同，而不仅仅是实际的 link 并使整个网格框区域可点击。

我已经弄乱它一段时间了，但无法让它按照我想要的方式工作。

<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 悬停在 li 元素上时，也将 color 应用于 a 元素。这将解决悬停文本颜色问题。

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%;
}

HTML 带链接的列表样式

HTML List Styling with Links

css

html-lists

less