0

我创建了一个由三部分组成的灵活按钮。
我用一张照片做了三个部分。我认为它被称为“精灵”什么的

这是CSS。

.commonButtonLeft, .commonButtonContent, .commonButtonRight
{
    background-image:url(img/commonbutton.png);
}

.commonButtonLeft
{
    float:left;
    height:40px;
    background-repeat:no-repeat;
    background-position:left;
    width:14px;
}

.commonButtonContent
{
    float:left;
    height:40px;
    background-repeat:no-repeat;
    background-position:center;
    text-align:center;
}

.commonButtonRight
{
    height:40px;
    background-repeat:no-repeat;
    background-position:right;
    width:14px;
    float:left;
}

现在我为单击的按钮创建了另一张图片“commonbutton_onclick.png”。
我添加了以下课程。

.commonButtonLeft:active, .commonButtonContent:active, .commonButtonRight:active
{
    background-image:url(img/commonbutton_onclick.png);
}

效果不好。
当我单击区域“.commonButtonContent”时，该区域仅成为活动图片。
我想让所有类都成为“commonbutton_onclick.png”。
顺便说一句，在这种情况下我不能使用 css3。
请帮我。

4

1 回答 1

1

首先，如果项目是 div，你需要使用:hover，而不是:active。

也许是单个 div 中的整个按钮（commonButton 类）。这样你就可以做这样的事情。当容器悬停在任何地方时，这将导致所有 3 个 div 发生变化，而不是针对单个部分的悬停。

这是一个JSFiddle来演示。

.commonButton .commonButtonLeft
{
    ...
}
.commonButton .commonButtonRight
{
    ...
}
.commonButton .commonButtonContent
{
    ...
}

.commonButton:hover .commonButtonLeft
{
    ...
}
.commonButton:hover .commonButtonRight
{
    ...
}
.commonButton:hover .commonButtonContent
{
    ...
}
于 2012-06-13T10:32:35.013 回答