2

我在自定义按钮中有两种颜色，其中第一种由按钮类定义，第二种由该按钮内的跨度类定义，当按钮处于活动状态时如何更改这两种颜色？

CSS：

.buttonClass{
  color:black;
}
.buttonClass:active{
  color:white;
}
.spanClass{
  color:grey;
}
.spanClass:active{ //working only when I click on span, but not for whole button
  color:red;
}

HTML：

<button class="buttonClass">
  <span class="spanClass">
    black/white text
  </span>
  grey/red text
</button>
4

3 回答 3

4

试试这个

.buttonClass:active .spanClass{
  color:red;
}
于 2013-05-23T11:34:53.870 回答
3

一些东西：

  • 很高兴看到您要实现的目标的代码示例。我已将您的代码放入 JFiddle 此处：http: //jsfiddle.net/ncAkG/但尚不清楚您要实现的目标。
  • :active 伪类不一定是跨度的最佳方法，因为它不是跨度的标准。

但是，看过之后，如果您尝试根据按钮的活动状态更改跨度的外观，最好的选择是从父项的活动状态继承新颜色，如下所示：

.buttonClass:active .spanClass{
  color:red;
}

这意味着当“.buttonClass”处于活动状态时，子元素“.spanClass”应该是红色的。

这是更新的小提琴：http: //jsfiddle.net/ncAkG/1/

这是您希望达到的目标吗？

为了进一步扩展这一点，您可以根据父级上的其他事件执行相同的操作，例如悬停：

.buttonClass:hover .spanClass{
  color:green;
}

在这里查看小提琴：http: //jsfiddle.net/ncAkG/2/

现在，您将看到跨度在您将鼠标悬停在按钮上时变为绿色，在单击按钮时变为红色（并变为活动状态）。

于 2013-05-23T11:34:34.677 回答
0

您需要一个额外的灰色/红色文本类来实现这一点。

编辑：

.buttonClass:active > .spanClass{
 color:red;
}
于 2013-05-23T11:30:52.037 回答