0

如果我不能清楚我正在尝试做什么，请原谅我。我对我将要解释的内容做了更简单的变体，但不是这样。

我有这个为“仪表板”创建的链接元素网格。目的是有一个 64x64 的图标，它是标题和描述的视觉表示，将放置在图标的右侧。整个元素（图标、标题和描述）必须是一个链接，以便用户有最好的机会点击他们想要的元素，因此我需要根据操作将 CSS 格式应用于链接和图标的链接。

例如，在正常操作期间（以及所有“访问过的”链接）将有一个正常外观的图标和大部分无色文本伴随它。当用户将鼠标悬停在元素上时，图标将切换到不同的版本（可能更亮）并且文本切换到替代颜色。当用户单击元素时，图标将再次切换到不同的版本，文本也是如此。诀窍是图标图像是一个图像，其中 CSS 切换它的图标显示。

对我来说，绊脚石是这样的：如果我没有为单元格块设置高度，则文本高度（或该元素的文本量）会影响单元格的高度，从而影响图标的显示方式。这是该问题的屏幕截图：

http://i.stack.imgur.com/f6y09.png

如果有人可以帮助我创建一个单元格块，其中图标仅显示该链接状态所需的图像部分，并允许显示任意数量的文本而不会对显示的图标产生不利影响，那就太棒了。我可以根据要求提供源 HTML。

更新：

源代码——这是表格中使用的 HTML。所有单元格都遵循这个通用模板：

<td width="25%">
<a href="#" id="linkPLP_AccandAcc" runat="server" class="PLP_AccandAcc secondaryColor">
    <div class="spacer">
    <h2>
        <span id="lblPLP_AccandAcc" runat="server"></span>
            Accounts and Access 
           </h2>
       <span class="description" id="lblPLP_AccandAccDescription" runat="server"></span>
        Categories: User Account, Password, Network access, Wi-Fi, VPN, IFS Security/Permissions and Sharepoint
    </div>
</a>
</td>

这是用于所有图标的通用 CSS 代码：

a.PLP_AccandAcc
{
    float:left; position:relative;
    margin-bottom:10px;
    background-image:url(../hsimages/NE/newService-sprite.png);
    background-position:0px 0px; 
    background-repeat:no-repeat;
}
a.PLP_AccandAcc:visited
{
    float:left; position:relative;
    margin-bottom:10px;
    background-image:url(../hsimages/NE/newService-sprite.png);
    background-position:0px 0px;
    background-repeat:no-repeat;
}
a.PLP_AccandAcc:hover
{
    float:left; position:relative;
    margin-bottom:10px;
    background-image:url(../hsimages/NE/newService-sprite.png);
    background-position:0px -105px;
    background-repeat:no-repeat;
}
a.PLP_AccandAcc:active
{
    float:left; position:relative;
    margin-bottom:10px;
    background-image:url(../hsimages/NE/newService-sprite.png);
    background-position:0px -210px;
    background-repeat:no-repeat;
}
4

0 回答 0