jquery :悬停其中一个元素时，悬停改变两个元素

Question

超级jquery初学者

我不知何故来到这里。悬停标题时，我也想更改摘录的背景......反之亦然（悬停摘录时，标题的背景也会改变）。

$(document).ready(function(){
  $(".heading, .excerpt").hover(
    function() { $(this).addClass('is-hover'); },
        function() { $(this).removeClass('is-hover'); });

});

.heading.is-hover{background-color: red;}
.excerpt.is-hover{background-color:green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <header class="heading"><h2>CIAO</h2></header>
   <div>don't change me</div>
   <div class="excerpt">text text text</div>
   </div>




<div>
   <header class="heading"><h2>hi!</h2></header>
   <div>don't change me</div>
   <div class="excerpt">text two text two</div>
</div>

我该如何继续？我有点卡住了。

我无法更改 html 部分，所以没有纯 css（这个问题与我的另一个问题 here 有某种关联）。

感谢您的帮助和建议！

大卫

Answer 1

您可以使用事件组合：mouseover 和 mouseleave 和 jQuery 的 .prevAll 和 .nextAll 以及 :first css 选择器为相应的 header/excerpt 着色或将其删除

$(document).ready(function(){
  $(".heading").on('mouseover', function() { 
      $(this).addClass('is-hover');
      $(this).nextAll('.excerpt:first').addClass('is-hover');
  });
  
  $(".excerpt").on('mouseover', function() {
      $(this).addClass('is-hover');
      $(this).prevAll('.heading:first').addClass('is-hover');
  });
  
  $(".heading").on('mouseleave', function() { 
      $(this).removeClass('is-hover');
      $(this).nextAll('.excerpt:first').removeClass('is-hover');
  });
  
  $(".excerpt").on('mouseleave', function() {
      $(this).removeClass('is-hover');
      $(this).prevAll('.heading:first').removeClass('is-hover');
  });

});

.heading.is-hover{background-color: red;}
.excerpt.is-hover{background-color:green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <header class="heading"><h2>CIAO</h2></header>
   <div>don't change me</div>
   <div class="excerpt">text text text</div>
   </div>




<div>
   <header class="heading"><h2>hi!</h2></header>
   <div>don't change me</div>
   <div class="excerpt">text two text two</div>
</div>

Answer 2

只针对那些 class 兄弟姐妹。这一个只会根据您的初始请求工作。下面的可能对你有用。

$(document).ready(function(){
  $(".heading").hover(
    function() { $(this).addClass('is-hover').siblings('.excerpt').addClass('is-hover'); },
        function() { $(this).removeClass('is-hover').siblings('.excerpt').removeClass('is-hover'); });

});

.heading.is-hover{background-color: red;}
.excerpt.is-hover{background-color:green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <header class="heading"><h2>CIAO</h2></header>
   <div>don't change me</div>
   <div class="excerpt">text text text</div>
   </div>




<div>
   <header class="heading"><h2>hi!</h2></header>
   <div>don't change me</div>
   <div class="excerpt">text two text two</div>
</div>

或者简单地添加一个全局 class 到包装 div

$('.heading').closest('div').addClass('hover-block');

$('.hover-block').hover(function() {
  $(this).addClass('is-hover');
}, function(){
   $(this).removeClass('is-hover');
});

.is-hover .heading {
  background: red;
}

.is-hover .excerpt {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <header class="heading"><h2>CIAO</h2></header>
   <div>don't change me</div>
   <div class="excerpt">text text text</div>
 </div>




  <div>
     <header class="heading"><h2>hi!</h2></header>
     <div>don't change me</div>
     <div class="excerpt">text two text two</div>
  </div>

jquery :悬停其中一个元素时，悬停改变两个元素

jquery :hover change two elements when hovering one of them

javascript

jquery

css

jquery-hover

onhover