Как показать или скрыть только один элемент мышиного класса, а не все?

Question

Я не могу понять, как показать или скрыть только один элемент на mouseover, не все из них. Я использую jQuery. Я пытался использовать this, но с несколькими классами это не вариант. Несколько советов?

$(document).ready(function() {
  function textAppear() {
    $('.solutions-visible').mouseenter(function() {
      $('.btn-solutions-invisible, .solutions-invisible-paragraph').show(500);
      $('.solutions-visible').css("box-shadow", "0px 5px 38.8px 1.2px rgba(0, 0, 0, 0.1)");
    });
    $('.solutions-visible').mouseleave(function() {
      $('.btn-solutions-invisible, .solutions-invisible-paragraph').hide(500);
      $('.solutions-visible').css("box-shadow", "none");
    });
  }

  textAppear();
});

Answer 1

Я упростил код, предложенный @Rory McCrossan. Я обернул решения в div и затем использовал $(this) и .find(), чтобы выбрать только те элементы, которые обернуты элементом hovered. Это должно дать вам достаточно, чтобы приспособить его к вашим спецификациям.

$(document).ready(function() {
  $('.solutions-visible').hover(function() {
    var elements = $(this).find('.solutions');
    elements.toggleClass('active');
  });
});

.solutions {
  opacity:0;
  transition: 0.5s opacity ease-in;
}
.solutions.active {
  opacity:1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="solutions-visible">
  <p>Show Solution 1</p>
  <p class="solutions solutions-invisible-paragraph">I'm a paragraph</p>
  <button class="solutions btn-solutions-invisible">I'm a button</button>
</div>
<div class="solutions-visible">
  <p>Show Solution 2</p>
  <p class="solutions solutions-invisible-paragraph">I'm a paragraph</p>
  <button class="solutions btn-solutions-invisible">I'm a button</button>
</div>
<div class="solutions-visible">
  <p>Show Solution 3</p>
  <p class="solutions solutions-invisible-paragraph">I'm a paragraph</p>
  <button class="solutions btn-solutions-invisible">I'm a button</button>
</div>
<div class="solutions-visible">
  <p>Show Solution 4</p>
  <p class="solutions solutions-invisible-paragraph">I'm a paragraph</p>
  <button class="solutions btn-solutions-invisible">I'm a button</button>
</div>