Html 当按钮为“时”；主动式；，我想把所有的图片都放到图片中，以便；主动的；

我创建了一个由三部分组成的灵活按钮。
我把一幅画分成三部分。我想它叫“雪碧”之类的东西

这是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\u onclick.png”。
我添加了下面的类

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

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

---

请帮助我。

首先，如果项目是div，则需要使用

：hover

，而不是

：active

也许，但整个按钮都在一个div中（类commonButton）。这样你就可以做这样的事情。当容器悬停在任何位置时，这将导致所有3个div都发生更改，而不是针对单个工件的悬停

下面是一个示例

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

.commonButton:hover .commonButtonLeft
{
    ...
}
.commonButton:hover .commonButtonRight
{
    ...
}
.commonButton:hover .commonButtonContent
{
    ...
}