43

だから私は 2 を持っdivています。それらはお互いにあるので、このように

<div class="parent">
    <div class="child"></div>
</div>

にカーソルを合わせたときにbackgroundfromを変更したい。.parent.parent

にカーソルを合わせると、 がbackground再び正常に戻り.childます。

例: (またはhttp://jsfiddle.net/k3Zdt/1/ )

.parent {
    transition:background-color 1s;
    width:100px;
    height:100px;
    background:#3D6AA2;
    padding:50px;
}

.parent:hover {
    background:#FFF;
}

.child {
    height:100px;
    width:100px;
    background:#355E95;
    transition:background-color 1s;
}

.child:hover {
    background:#000;
}
<div class="parent">
    <div class="child">
    </div>
</div>

ダークブルーの領域にカーソルを合わせると、それほどダークブルーではない領域が白に変わるのではなく、それほどダークブルーではないままになります。

<div>この構造を維持したい。JavaScript ソリューションは必要ありません (JavaScript ソリューションは知っていますが、純粋な CSS のままにしておきたいです)。

4

2 に答える 2

24

基本的にできません:子要素をホバリングするときに親要素のスタイルを設定する方法は?

しかし、トリックは兄弟要素を使用することです: http://jsfiddle.net/k3Zdt/8/

.parent {
  width: 100px;
  height: 100px;
  padding: 50px;
}

.child {
  height: 100px;
  width: 100px;
  background: #355E95;
  transition: background-color 1s;
  position: relative;
  top: -200px;
}

.child:hover {
  background: #000;
}

.sibling {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 50px;
  top: -50px;
  left: -50px;
  background: #3D6AA2;
  transition: background-color 1s;    
}

.sibling:hover {
  background: #FFF;
}
<div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div>

于 2013-07-29T12:35:55.990 に答える