mouseover和mouseout时如何使用forEach进行显示和隐藏？

Question

I create the HTML code. now i want to use forEach in JS when the mouse over, but when i use forEach method it just happen for first item not the others. i want its happen for each one when mouseover and mouseout.

my code link: codepen.io/A_Mahdi28/pen/bGvOebr

how do i use forEach method do it on all items?

Please help me.

Answer 1

With the given informations the following code may help you to understand the events you need for mouseover / mouseout.

In the HTML I have added "onmouseover / onmouseout" to your code pointing to the functions show/hide. Inside those functions you can now execute your code for these events. If you are targeting a special div you have to also pass some parameters so you can identifiy the div you want to target.

 const mainProduct = document.querySelector('.main_product'); const mainInfo = document.getElementById('main_info'); mainProduct.classList.add('hidden'); mainInfo.style.filter = 'blur(2px)'; function show(target) { console.log(target); mainProduct.classList.remove('hidden'); mainInfo.style.filter = 'blur(0)'; } function hide(target) { console.log(target); mainProduct.classList.add('hidden'); mainInfo.style.filter = 'blur(2px)'; }

 <div href="#" class="review_book" onmouseover="show(event.target)" onmouseout="hide(event.target)"> <div id="main_info"> <img src="/img/Reviews/1984.jpg" alt="1984 Cover" /> <div class="main_description"> <p class="book_name">1984</p> <p class="book_author">George Orwell</p> </div> </div> <div class="main_product hidden"> <div href="#"> <button class="btn see_review--btn"> <i class="ph-eye"></i> </button> </div> <button class="btn add_wishlist--btn"> <i class="ph-bookmark-simple"></i> </button> <button class="btn add_cart--btn"> <i class="ph-shopping-cart"></i> </button> </div> </div>

So if you want to target a specific div you can either add an index to the classlist or pass the event directly in the mouseover. If you now check those events you should be able to extract the main_product and main_info of that event and manipulate the css of those.