Javascript 如何使鼠标指针在负z索引下工作

因此，我尝试在两种不同的情况下使用mouseenter事件（如下所示）：在“day pass”类中，它正常工作。在“餐馆”类中，它不起作用，我相信是因为它有一个负的“z指数”（当我去掉“z指数”时，它起作用）。我需要负的“z-indez”，因为这个部分必须在另一个下面

反应组分

import React, { useState } from 'react';
import './styles.css';
import { Animated } from "react-animated-css";

const Home: React.FC = () => {
  const [isDayPassHovered, setIsDayPassHovered] = useState<boolean>(false);
  const [isRestaurantHovered, setIsRestaurantHovered] = useState<boolean>(false);

  const handleDayPassMouseOver = () => setIsDayPassHovered(true);
  const handleDayPassMouseOut = () => setIsDayPassHovered(false);
  const handleRestaurantMouseOver = () => { setIsRestaurantHovered(true); }
  const handleRestaurantMouseOut = () => setIsRestaurantHovered(false);

  return (
    <section className="content">
      <section className="about">
        FOOBAR
      </section>
      <section className="day-pass" onMouseEnter={() => handleDayPassMouseOver()} onMouseLeave={() => handleDayPassMouseOut()}>
        <Animated className="day-pass-info" animationIn="fadeIn" animationOut="fadeOut" animationInDuration={800} animationOutDuration={800} isVisible={isDayPassHovered}>
           FOO 1
        </Animated>
        BAR 1
      </section>
      <section className="restaurant" onMouseOver={() => handleRestaurantMouseOver()} onMouseLeave={() => handleRestaurantMouseOut()}>
        <Animated className="restaurant-info" animationIn="fadeIn" animationOut="fadeOut" animationInDuration={800} animationOutDuration={800} isVisible={true}>
          FOO 1
        </Animated>
        BAR 1
      </section>
    </section>
  );
}

export default Home;

.content {
    background-image: url("../../assets/bg.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 1920px;
}

.about {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    height: 32vw;
    max-width: 1920px;
    max-height: 620px;
    margin-top: -7.8%;
    padding-left: 7%;
    padding-right: 7%;
}

.day-pass {
    background-image: url("../../assets/day-pass-bg.png");
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 1920px;
    display: flex;
    height: 44.5vw;
}

.day-pass-info {
    flex: 1;
    background-image: url("../../assets/day-pass-info-bg.png");
    background-size: contain;
    background-repeat: no-repeat;
    padding: 13% 21% 10% 7%;
    max-height: 845px;
}

.restaurant {
    background-image: url("../../assets/restaurant-bg.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    height: 49vw;
    max-width: 1920px;
    margin-top: -6.2%;
    z-index: -1;
}

.restaurant-info {
    display: flex;
    flex: 3;
    margin-top: 4%;
}