jQuery：風格懸停在父母（）和孩子（）

Question

我想知道是否有可能改變它的元素被徘徊時的孩子的風格，而其CSS也被稱爲當其父母被徘徊？

爲了清楚我的問題，我寫下了以下基本代碼：

//styling child while mouse is inside child element 
$('child').on('hover', function(e){ 
    if (e.type == 'mouseenter'){ 
     $(this).css('background','yellow'); 
    } 
}) 

    // styling child while mouse is inside parent 
$('child').parents().on('hover', function (e){ 
    if (e.type == 'mouseenter'){ 
     $(this).css('background', 'blue'); 
    } 
}) 

所以，基本上，一旦用戶進入父的空間，使孩子的BG藍色，一旦進入孩子的空間，從改變藍色到黃色bg。

---

我看到我爲什麼不使用CSS的評論，所以這是一個小的解釋：我無法選擇父元素。我只能從使用父母的孩子那裏做（）。只要css不支持父母（）方法，但我去了jQuery。 :)

Answer 1

CSS當家：

div { 
 
    padding: 20px; 
 
    border: 1px solid black; 
 
} 
 

 
/* something hovered that have .child as direct child => change .child color to blue */ 
 
*:hover > .child { 
 
    background-color: blue; 
 
} 
 

 
/* .child element hovered => override the above color and set it to yellow (note that the above rule is still taking effect when this is taking effect) */ 
 
.child:hover { 
 
    background-color: yellow; 
 
}

<div> 
 
    PARENT 
 
    <div class="child">CHILD</div> 
 
</div> 
 
<div> 
 
    PARENT 
 
    <div class="child">CHILD</div> 
 
</div> 
 
<div> 
 
    PARENT 
 
    <div class="child">CHILD</div> 
 
</div>

Answer 2

是該行爲你期待什麼呢？

$('#child').parent().on('mouseover', function(e){ 
 
    if(this===e.target){ 
 
    $(this).children().css('background','blue'); 
 
    }else{ 
 
    $(this).children().css('background','yellow'); 
 
    } 
 
}).on('mouseout', function(e){  
 
    $(this).children().css('background', 'green'); 
 
});

#parent{ 
 
    width:200px; 
 
    height:100px; 
 
    background-color:#f00; 
 
} 
 

 
#child{ 
 
    width:30px; 
 
    height:30px; 
 
    background-color:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <div id="child"></div> 
 
</div>