Question

请原谅我，如果我无法清楚我想要做什么。我已经完成了我要解释的更简单的变化，但不是这样的。

我有一个链接元素网格，我正在为“仪表板”创建。目的是使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;
}

链接元素中的图像精灵

0 个答案: