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>