在div

Question

我有两个同一个班级的div，我无法改变。一个div是一个div的父级。我希望他们有一个hovereffekt，但如果我徘徊孩子，父母的盘旋应该消失。 div由extjs自动创建，可以是2甚至更多。

<div class="x-test-container">
    <div class="x-test-container">
         <div class="x-test-container">
         </div>
    </div>
</div>

所以，如果我徘徊在内心的孩子身上，我希望父母没有自己的想法。有人能帮助我吗？

Answer 1

这应该有效

$(document).ready(function () {
  $(".x-test-container").mouseover(function(event) {
    event.stopPropagation();
    //set the background color to desired color on mouseover
  	$(this).css('background', 'green');
  });
  
  $(".x-test-container").mouseout(function(event) {
    //set the background color to desired color on mouseout
  	$(this).css('background', 'transparent');
  });
});

div {
  border: solid 1px;
  padding: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="x-test-container">
  <div class="x-test-container">
    <div class="x-test-container">
    </div>
  </div>
</div>

Answer 2

尝试这个

jQuery(document).ready(function() {
  jQuery('.x-test-container').last().css('background', 'green');
  jQuery('.x-test-container').last().hover(function() {
    jQuery('.x-test-container').last().css('background', 'red');
  });
  jQuery('.x-test-container').last().mouseout(function() {
    jQuery('.x-test-container').last().css('background', 'green');
  });

});

div {
  border: solid 1px;
  padding: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="x-test-container">
  <div class="x-test-container">
    <div class="x-test-container">
    </div>
  </div>
</div>