Выбор только элемента, в настоящее время находящегося в зоне действия jquery, и переключение видимости следующего элемента?

Question

У меня есть div с классом .MathBox, следующий элемент - .ypnLeftRight Всякий раз, когда пользователь наводит на .MathBox, переключается видимость .ypnLeftRight.Это прекрасно работает, когда есть один элемент .MathBox, но когда таких элементов много, jquery выбирает все элементы с классом .Mathbox, и все элементы .ypnLeftRight одновременно переключаются.

Как переключать толькоdiv с классом .ypnLeftRight присутствует сразу после текущего элемента .MathBox?

$('.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.Во-вторых ... вам нужно нацелиться на .next () объекта над .MathBox следующим образом:

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

Цель OP - использовать кнопки внутри .ypnLeftRight при наведении курсора на .MathBox.Приведенный выше код не может этого сделать, потому что DIV не заключены вместе в родительский div.Ниже приведен код, который служит цели ОП.

Заключите div .MathBox в 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();
});