当一个按钮处于“活动”状态时，我想将所有图像制作为“活动”图片

Question

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

这里是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。
请帮帮我。

Answer 1

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

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

这里是一个JSFiddle来演示。

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

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