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
{
    ...
}

当一个按钮处于“活动状态”时，我想让所有图像都显示为“活动”

1 个答案: