when a button is "active", I want to make all images to the picture for "active"

I created a flexible button made of three parts. I made three parts from one picture. I think it is called "sprite" or something

Here is the 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;
}

Now I created another picture "commonbutton_onclick.png" for the clicked button. And I added the following class.

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

It didn't work well. When I click the area ".commonButtonContent", the area only becomes the active picture. I want to make all classes to be "commonbutton_onclick.png". I can not use css3 in this case by the way. Please help me.

Answers


Firstly, if the items are divs, you'll need to use :hover, not :active.

Perhaps but the entire button in a single div (class commonButton). this way you can do something like this. This will cause all 3 divs to change when the container is hovered anywhere, rather than targeting the hovering of a single piece.

Here is a JSFiddle to demonstrate.

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

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

Need Your Help

Display error alert upon form submission

php jquery html forms

I want when I submit form if username or password is incorrect, then it should display me alert box. For the alert message I used the alertify plugin, but it is showing traditional alert box. My co...

Android, how to change image-view item of list-view dynamically?

android image listview dynamic listadapter

I have a list. Each row includes an Image at left and two text views on right.