更改链接中元素的CSS样式

Question

当我试图解释我正在尝试做什么时，请耐心等待......

我有一个图标网格，最终将成为定制的服务请求页面 - 每个图标代表用户可以提交的不同类型的请求。在这些网格中，我们尝试放置脚本生成的标题文本以及表示/可视化请求的图标。此图标也将是一个“精灵”，它将根据其包含的链接状态（正常，悬停，活动等）而改变。为了帮助用户有效地单击正确的请求类型，每个单元格的内容将位于给定单元格的链接元素内，这意味着用户可以单击该单元格存在的任何位置以进入下一页 - 特殊格式化将应用于从背景中描绘该区域。

我遇到的问题 - 并且无法提出解决方案 - 是如何为整个单元创建此链接并且能够更改元素的CSS编码（在这种情况下）一个H2标签和一个DIV）基于链接的状态（悬停，活动等），以及适当的CSS编码是什么样的？

我知道你可以做孩子/父CSS编码，但也可以为伪元素做这个吗？如果是这样，怎么样？

---

<table>
    <tr>
        <td>
            <a href="#" title="exampleCellLink" id="cellblock">
                <h2>Cell Block Title</h2>
                <div id="cellIcon">
                    <!-- DIV placeholder for the sprite image to be placed via CSS coding -->
                </div>
            </a>
        </td>
    </tr>
</table>

Answer 1

通过将伪选择器应用于父元素并在其后面包含子元素，您可以非常简单地执行此操作。像这样：a:hover h2 { <properties on parent hover> } a:hover div { <properties on parent hover>}

注意：在您的代码中，您使用了<div id="cellicon">。从名称来看，这听起来像是一堂课。如果您重复使用相同的ID，请不要忘记中断HTML。

您还可以在一个精灵中包含所有图标，用于每个链接;假设您有5个图标（16x16px），其中:hover, :active and :visited具有不同的属性。你的精灵每个图标都有4张图片。

每个图标的代码都是:(图标2中的值）

a div { /* first specify the sprite for all links */
  background-image: url('...');
}
a#<linkid> div { /* normal state */
  background-position: -16px 0px;
}
a#<linkid>:hover div { /* hovered state */
  background-position: -16px -16px;
}
a#<linkid>:active div { /*active state */
  background-position: -16px -32px;
}
a#<linkid>:visited div { /* visited state */
  background-position: -16px -48px;
}