web-dev-qa-db-ja.com

CSS ::子は親ホバーで色を変更するように設定されていますが、それ自体でホバーされたときにも変更されます

を持っています <a> とともに <span>子供。親がホバーされると子の境界線の色を変更するCSSを記述しましたが、子をホバーすると境界線の色も変更しますが、これはすべきではありません。

a {
    padding: 50px;
    border: 1px solid black;
}

a span {
    position: absolute;
    top: 200px;
    padding: 30px;
    border: 10px solid green;
}

a:hover span {
    border: 10px solid red;
}   
<a>
    Parent text
    <span>Child text</span>    
</a>
htmlcsshoverparent-child
38
HoGo

更新

以下は2013年には理にかなっています。しかし、今では、 下 のように:not()セレクターを使用します。

CSSは上書きできます。

デモ： http://jsfiddle.net/persianturtle/J4SUb/

これを使って：

.parent {
  padding: 50px;
  border: 1px solid black;
}

.parent span {
  position: absolute;
  top: 200px;
  padding: 30px;
  border: 10px solid green;
}

.parent:hover span {
  border: 10px solid red;
}

.parent span:hover {
  border: 10px solid green;
}
<a class="parent">
    Parent text
    <span>Child text</span>    
</a>
61
Raphael Rafatpanah

古いブラウザのサポートを気にしない場合は、:not()を使用してその要素を除外できます。

.parent:hover span:not(:hover) {
    border: 10px solid red;
}

デモ： http://jsfiddle.net/vz9A9/1/

あなたがdoそれらをサポートしたい場合、JavaScriptを使用するかCSSプロパティを再度オーバーライドする必要があると思います：

.parent span:hover {
    border: 10px solid green;
}
4
Blender