0

请耐心等待我试图解释我正在尝试做的事情......

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

我遇到的问题 - 并且无法提出解决方案 - 我将如何为整个单元格创建此链接并能够更改元素的 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>
4

1 回答 1

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;
}
于 2013-06-06T12:19:01.060 回答