0

デフォルトで非表示に設定した2つの子要素があります。

.child1, .child2{
visibility:hidden;
}

#parent :hover .child1, #parent:hover .child2{
visibility:visible;
}

ご覧のとおり、親にカーソルを合わせると、子が表示されます。これまでのところ簡単です。

ここで注意が必要な部分があります。子供のうちの1人にカーソルを合わせると、他のすべての子供が再び隠れるようになります。したがって、child1にカーソルを合わせると、child2は表示されなくなります。私は、いわば親のホバリングを「元に戻す」ことを望み、ホバリングしている子供だけを表示したままにします。

親：ホバーをオーバーライドまたは元に戻すにはどうすればよいですか？

編集： 私はこれを見つけました、それは正しい方向に進んでいます：

#parent:hover > .child1:hover{
    do something;
}

基本的に、親と子1の両方にカーソルを合わせると、スタイルが子1に適用されます。これが私が探しているものですが、問題は、child1ではなくchild2にスタイルを適用するにはどうすればよいかということです。

Edit2： 別のアイデアは次のようなものを使用することです：

#parent:hover >.children:not(.child1){
    do something;
}

これにより、child1ではない親のすべての子が選択され、スタイルが適用されます。繰り返しになりますが、問題：これは、親だけをホバリングしたときにのみトリガーされます。親と子1がホバーされたときに、これとまったく同じ効果をトリガーするにはどうすればよいですか？

4

1 に答える 1

2

さて、私が望んでいたことを正確に行うための適切な方法がないようだったので、私は少し回避策を使用し、不透明度を使用してそれを解決しました：

.child1, .child2{ 
    opacity:0; 
}

#parent:hover .child1, 
#parent:hover .child2{ 
    opacity:0.6; 
}

#parent:hover > .child1:hover,
#parent:hover > .child2:hover{
    opacity:1; 
}

つまり、基本的に、親だけにカーソルを合わせると、すべての子が「半透明」になり、親と子にカーソルを合わせると、その子が完全に表示されます。元のアイデアとは少し異なりますが、問題はありませんでした。

于 2012-10-17T18:48:26.660 に答える