Jak poprawnie dodać mouseover na divie

Question

Mam kilka divów, w każdym tekst ma display:none. Chciałbym aby po najechaniu na konkretnego diva wyświetlił się jego tekst. Niestety nie działa to, nie ma żadnej reakcji i w konsoli też żadnego błędu. Jak wrzucę sobie console.log to wyświetla co trzeba po każdym najechaniu na element więc sama funkcja mouseover działa ale reszta już nie. Dodawałem też event i to samo....

css:

.box-wrapper .single-box-text: display:none;

html:

<a href="#">
<div class="box-wrapper">
<p class="box-title"></p>
<div class="box-content box-one">
  <div class="single-box-text">
    <p></p>
    <p></p>
    <p></p>
  </div>
</div>
</div>
</a>

js:

$(".box-wrapper").mouseover(()=>{
console.log('test');
$(this).find(".box-content .single-box-text").css("display","block");
	});

próba z eventem:

const element = document.querySelector(".box-wrapper");

element.addEventListener("mouseover", event => {
  console.log("Mouse in");
  $(this).find(".box-content .single-box-text").css("display","block");
});

element.addEventListener("mouseout", event => {
  console.log("Mouse out");
  $(this).find(".box-content .single-box-text").css("display","none");
});

 

Comments

To początek jakiegoś większego planu, czy tylko chcesz ukrywać i wyświetlać treść? Bo sam CSS wystarczy (hover z display), nie musisz używać jQuery.

---

Chcę tylko ukryć/wyświetlić po najechaniu.

Piszesz o czymś takim?

.box-wrapper .single-box-text: 
   display:none;
.box-wrapper:hover + .single-box-text:
   display:block;

 To też mi nie działa

---

Już sobie sam odpowiedziałem... bez '+'  działa.

Dzięki za pomoc :)