1

だから私はCSSスタイルを持っています

.style-a {

}

.style-b {

}

そして今、私はホバリングまたはアウトするときに異なるスタイルを持つように要素を作成したいと思います。疑似のような：

.my-class {
  .style-a here
}

.my-class:hover {
  .style-b here
}

style-aを変更することはできません。style-b他の多くの要素がこれら2つに依存しているため、変更するのが面倒になります。JavaScriptを使用せずに、変更style-aせずにこの機能を実現するにはどうすればよいですか？style-b

4

5 に答える 5

2

次のようなものを作成してみませんか。

.my-class {
  /*common elements here*/
}
.style-a {
 /*style-a elements*/
}
.style-b {
     /*style-b elements*/
}
.my-class .style-a {

}

.my-class .style-b {

}

このようにして、必要なクラスのスタイルを変更せずに設定でき、子クラスとして設定できると思います。

于 2012-11-23T18:04:03.430 に答える
0

これはCSSでは不可能です。

ただし、lesscssを使用して、lesscssファイルをCSSファイルにコンパイルすることはできます。

それはミックスインと呼ばれています

于 2012-11-23T17:55:05.077 に答える
0

.style-a、および.style-bが両方ともの子である場合.my-class、次を使用できます。

.my-class .style-a {
    // style here
}

.my-class:hover .style-b {
    // style here
}
于 2012-11-23T17:59:22.367 に答える
0

プレーンCSSで説明したことを実行することはできません。Javascriptなしで2つのオプションを考えることができます：

  1. SASS/SCSS@extendの機能を使用する
  2. style-aおよびからすべてのルールをコピーして貼り付けますstyle-b
于 2012-11-23T17:59:50.920 に答える
0

Sassの@extendディレクティブはあなたが探しているものです：

SCSS：

.style-a {
  // common styles
}

.style-b {
  // common styles
}

.my-class {
  @extend .style-a;
}

.my-class:hover {
  @extend .style-b;
}

CSS：

.style-a, .my-class {
  // common styles
}

.style-b, .my-class:hover {
  // common styles
}

JSがなく、コピー/貼り付け、マークアップへのクラスの追加、または元のスタイルを変更してセレクターを追加しない限り、他の解決策はありません。

于 2012-11-23T18:13:37.477 に答える