2

カスタム ボタン内に 2 種類の色があり、1 番目はボタンのクラスによって定義され、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」は赤になるということです。

更新された Fiddle は次のとおりです: http://jsfiddle.net/ncAkG/1/

これはあなたが達成したかったことですか？

これをもう少し拡張するには、ホバーなど、親の他のイベントに基づいて同じことを行うことができます。

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

ここでフィドルを参照してください: http://jsfiddle.net/ncAkG/2/

ボタンにカーソルを合わせるとスパンが緑色に変わり、ボタンをクリックすると (アクティブになると) スパンが赤色に変わることがわかります。

于 2013-05-23T11:34:34.677 に答える