web-dev-qa-db-ja.com

親にホバー効果のない子にホバー

だから私は2つのdivを持っています

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

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

.childの上にマウスを移動すると、backgroundが再び通常に戻ります。

例えば： http://jsfiddle.net/k3Zdt/1/

濃い青色の領域にカーソルを合わせると、それほど濃い青色ではない領域を、白に変わるのではなく、それほど濃い青色のままにしたいのです。

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

csscss3hover
27
EaterOfCode

基本的にはできません： 子要素をホバーするときに親要素をスタイルする方法？

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

<div class="parent">
     <div class="sibling"></div>
     <div class="child"></div>
</div>
13
luxcem

あなたは何かをだますことができます;）

基本的に、:before同じサイズの子divの擬似要素。

子divにカーソルを合わせたら、:before父親div領域をカバーする擬似要素。これにより、父親div hover効果が低下し、元の状態に戻ります。 z-indexの正確な組み合わせも含まれます。

デモ： http://jsfiddle.net/gFu8h/

[〜＃〜] css [〜＃〜] ダークマジック（tm）

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

.parent:hover{
    background:#FFF;    
}


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

.child:hover {    
    background:#000;
}

.child:before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;        
    z-index: -1;
    transition:background-color 1s;
}

.child:hover:before{
    top: -50px;
    bottom: -50px;
    left: -50px;
    right: -50px;     
    background:#3D6AA2;    
}
10
Andrea Ligios