0

3つのパーツからなる柔軟なボタンを作成しました。
1枚の絵から3つのパーツを作りました。「スプライト」か何かと呼ばれていると思います

ここに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 (class 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 に答える