为什么我的鼠标悬停在 div 内的其他元素上不起作用？

Question

我正在尝试制作一张卡片，当它没有悬停时，您只能看到图像。当图像悬停时，它应该会长大，并且 div 会弹出到图像右侧，显示一些信息。
出于某种原因，当我将鼠标悬停在图像上时，一切正常。但是当我的鼠标悬停在它旁边的 div 上时，一切都开始摇晃，好像悬停不正常。
我试图将悬停效果同时更改为图像和包含两个 div 的父 div，但没有任何修复。我该怎么办？

$(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

将您的目标更改为 card 容器，这样当它变大时，您仍会悬停在它上面。就像现在一样，您的目标是图像 - 当它向左动画时会触发 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>

为什么我的鼠标悬停在 div 内的其他元素上不起作用？

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

html

javascript

css

jquery

mousehover