使用 a:hover 更改列表中多个元素的文本颜色答案

【问题标题】：Change the text color of multiple elements in a list with a:hover使用 a:hover 更改列表中多个元素的文本颜色
【发布时间】：2014-01-17 14:30:10
【问题描述】：

所以，我将这个列表包含在一个特定的 ID 中。我只想操作这个特定 id 的链接颜色，即#icon-header。那么问题来了：

我希望整个 li 元素成为链接，但不是在悬停时更改背景颜色，而是希望所有文本元素的颜色为 #2BA6CB。而且无论用户点击哪里，我都希望整个 li 元素成为链接。

所以，我想知道我放置 a 标签的位置是否有问题，以及您对这一切的 css 的建议是什么。

i 标签是一种网络字体。当用户将鼠标悬停在 li 上时，我需要同时更改 h4 和 p 标签。

任何帮助都会令人惊叹。这是html：

 <div class="row hide-for-small" id="icon-header" align="center">

    <ul class="large-block-grid-6 small-block-grid-1 medium-block-grid-6">
        <li></li>
        <li>
            <a href="#">
            <i class="fi-male size-60"></i>
            <h4>Ready</h4>
            <p>Create a personal health and fitness profile.</p>
            </a>
        </li>

        <li>
            <a href="#">
            <i class="fi-checkbox size-60"></i>
            <h4>Set</h4>
            <p>Set goals and chart your progress.</p>
            </a>
        </li>

        <li>
            <a href="#">
            <i class="fi-upload-cloud size-60"></i>
            <h4>Go</h4>
            <p>Upload your exercise data from anywhere.</p>
            </a>
        </li>


        <li>
            <a href="#">
            <i class="fi-graph-bar size-60"></i>
            <h4>Learn</h4>
            <p>View real results and develop healthy patterns.</p>
            </a>
        </li>
        <li></li>
    </ul>
</div>

【问题讨论】：

标签： html hover html-lists

【解决方案1】：

您需要为a-tag 提供li 元素的尺寸（宽度和高度），而不是设置li 元素的样式。然后您将获得效果，即您可以单击整个突出显示的区域，而不仅仅是链接。

要给像'a'-Tag这样的内联元素一个宽度和高度，你需要给它'display:block;`。

【讨论】：

【解决方案2】：

在 css 中显示 'a' 标签：块。请注意，在 html5 中仅允许在块级元素周围包裹锚标记。旧的规范明确禁止它。

【讨论】：