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。

我看到了为什么我不使用css的评论，所以这是一个小解释：我无法选择父元素。我只能从使用parent（）的孩子那里做到这一点。只要css不支持parents（）方法，我就去了jquery。：）

Answer 1

CSS独自：

＆＃13;

wordbackw

＆＃13;

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;
}

＆＃13;

Answer 2

是你期望的行为吗？

＆＃13;

$('#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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery：样式悬停在parents（）和children（）上

2 个答案: