Why my hover doesn't work on other elements inside the div?

Question

I am trying to build a card which when it is not hovered, you can see only the image. When the image is hovered, it should grow up and a div pops to the right of the image presenting some information.
For some reason, when I hover the image, everything works fine. But when my mouse hovers to the div besides it, everything starts to shake as if the hover is not working well.
I've tried to change the hover effect both to the image and the parent div which contains both divs but nothing fixed it. What should I do?

 $(document).ready(function(){ document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseover", () => hoverAnimation(0), false); document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseout", () => disableHoverAnimation(0), false); }) const hoverAnimation = (index) => { console.log('inside add animation'); $(`.personCard-${index}`).toggleClass('active'); $(`.personCard-${index} .personalInfoCard`).toggleClass('active'); } const disableHoverAnimation = (index) => { console.log('inside remove animation'); $(`.personCard-${index}`).toggleClass('active'); $(`.personCard-${index} .personalInfoCard`).toggleClass('active'); }

 *{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 50vh; display: flex; justify-content: center; align-items: center; } .cards{ display: flex; } .personCard{ display: flex; margin: 10px; transition: all 0.4s ease-in-out; box-shadow: 0 0 5px rgba(0, 0, 0, 0.63); border-radius: 10px; overflow: hidden; } .personCard.active{ transform: scale(1.5); } .imgCard{ height: 200px; width: 130px; overflow: hidden; transition: all 0.4s ease-in-out; } .imgCard img{ height: 200px; width: 130px; } .personalInfoCard{ background-color: palevioletred; display: flex; height: 200px; width: 0px; flex-direction: column; justify-content: center; align-items: center; z-index: -1; font-size: 14px; transition: all 0.4s ease-in-out; } .personalInfoCard.active{ width: 200px; display: flex; z-index: 1; height: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="cards"> <div class="personCard-0 personCard" > <div class="imgCard"> <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> </div> <div class="personalInfoCard"> <p>Name: Rand name</p> <p>Age: Rand age</p> <p>Job: Rand job</p> <p>Study: Rand proffesion</p> </div> </div> </div> </body> <script src="script.js"></script> </html>

Answer 1

Change your target to be the card container so that when it grows, you'll still be hovering over it. As it is now, your target is the image - which when it animates left triggers the mouseout

$(document).ready(function() {
  document.querySelector(`.personCard-0`).addEventListener("mouseover", () => hoverAnimation(0), false);
  document.querySelector(`.personCard-0`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})

 $(document).ready(function() { document.querySelector(`.personCard-0`).addEventListener("mouseover", () => hoverAnimation(0), false); document.querySelector(`.personCard-0`).addEventListener("mouseout", () => disableHoverAnimation(0), false); }) const hoverAnimation = (index) => { console.log('inside add animation'); $(`.personCard-${index}`).toggleClass('active'); $(`.personCard-${index} .personalInfoCard`).toggleClass('active'); } const disableHoverAnimation = (index) => { console.log('inside remove animation'); $(`.personCard-${index}`).toggleClass('active'); $(`.personCard-${index} .personalInfoCard`).toggleClass('active'); }

 * { padding: 0; margin: 0; box-sizing: border-box; } body { height: 50vh; display: flex; justify-content: center; align-items: center; } .cards { display: flex; } .personCard { display: flex; margin: 10px; transition: all 0.4s ease-in-out; box-shadow: 0 0 5px rgba(0, 0, 0, 0.63); border-radius: 10px; overflow: hidden; } .personCard.active { transform: scale(1.5); } .imgCard { height: 200px; width: 130px; overflow: hidden; transition: all 0.4s ease-in-out; } .imgCard img { height: 200px; width: 130px; } .personalInfoCard { background-color: palevioletred; display: flex; height: 200px; width: 0px; flex-direction: column; justify-content: center; align-items: center; z-index: -1; font-size: 14px; transition: all 0.4s ease-in-out; } .personalInfoCard.active { width: 200px; display: flex; z-index: 1; height: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="cards"> <div class="personCard-0 personCard"> <div class="imgCard"> <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> </div> <div class="personalInfoCard"> <p>Name: Rand name</p> <p>Age: Rand age</p> <p>Job: Rand job</p> <p>Study: Rand proffesion</p> </div> </div> </div> </body> <script src="script.js"></script> </html>

Why my hover doesn't work on other elements inside the div?

Question

1 answers

solution1
2 ACCPTED 2021-06-24 22:59:36

Why my hover doesn't work on other elements inside the div?

Question

1 answers

solution1 2 ACCPTED 2021-06-24 22:59:36

solution1
2 ACCPTED 2021-06-24 22:59:36