javascript - 仅选择当前正在使用 jquery 悬停的元素并切换下一个元素的可见性？

Question

我有一个类为 .MathBox 的 div，下一个元素是 .ypnLeftRight每当用户将鼠标悬停在 .MathBox 上时，.ypnLeftRight 可见性就会切换。当只有一个 .MathBox 元素时，这非常有效，但是当有许多这样的元素时，jquery 选择具有类 .Mathbox 和所有 .ypnLeftRight< 的所有元素 元素同时切换。

如何仅在当前悬停的 .MathBox 元素之后切换带有类 .ypnLeftRight 的 div？

$('.MathBox').after('<div class="ypnLeftRight"><div class="left-button">&laquo;</div><div class="right-button">&raquo;</div></div>');

$('.right-button').click(function() {
  event.preventDefault();
  $('.MathBox').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

$('.left-button').click(function() {
  event.preventDefault();
  $('.MathBox').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

$('.MathBox , .ypnLeftRight').hover(function() {
  $('.ypnLeftRight').show();
}, function() {
  $('.ypnLeftRight').hide();
});
/*
  $('.MathBox , .ypnLeftRight').hover(function(){
    $(this).find('.ypnLeftRight').show();
  }, function(){
    $(this).find('.ypnLeftRight').hide();
  });*/

.MathBox {
  width: 100%;
  border: dashed 1px #dddddd;
  overflow: auto;
  padding: 0 1em;
  box-sizing: border-box;
}

.ypnLeftRight {
  display: grid;
  grid-template-columns: 50% 50%;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  height: 1.5em
}

.ypnLeftRight>div:hover {
  background: rgba(0, 0, 0, 0.8);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="postContentItem">
  1<br/>
  <div class="MathBox">
    x^2 + 3x + 30 -32x^3 +16x^4 -x^2 -55x + 60= 0<br/>text{This is the required equation obtained by solving the quadratic equation by factorization method.
  </div>
  222<br/> 222
  <br/>1<br/>
  <div class="MathBox">
    x^2 + 3x + 30 -32x^3 +16x^4 -x^2 -55x + 60= 0<br/>This is the required equation obtained by solving the quadratic equation by factorization method.
  </div>
  222<br/> 222
  <br/>
</div>

我已经尝试了以下方法，但它似乎不起作用。

$('.MathBox , .ypnLeftRight').hover(function(){
  $(this).find('.ypnLeftRight').show();
}, function(){
  $(this).find('.ypnLeftRight').hide();
});

Answer 1

因为 ypnLeftRight 总是隐藏的，你不需要在它上面悬停。悬停仅适用于 .MathBox。其次...您需要像这样定位悬停在 .MathBox 上的 .next():

$('.MathBox').hover(function(){
  $(this).next('.ypnLeftRight').show();
}, function(){
  $(this).next('.ypnLeftRight').hide();
});

OP 的目的是在悬停 .MathBox 时使用 .ypnLeftRight 内的按钮。上面的代码无法这样做，因为 DIV 没有一起包含在父 div 中。以下是服务于 OP 目的的代码。

将 .MathBox div 包含在一个 div 中

<div class="MathBoxParent">
  <div class="MathBox">
    x^2 + 3x + 30 -32x^3 +16x^4 -x^2 -55x + 60= 0<br/>text{This is the required equation obtained by solving the quadratic equation by factorization method.
  </div>
</div>

然后使用下面的代码

$('.MathBoxParent').hover(function(){
  $(this).find('.ypnLeftRight').show();
}, function(){
  $(this).find('.ypnLeftRight').hide();
});