Как заставить мышь работать с отрицательным z-индексом

Question

Итак, я пытаюсь использовать событие 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;

CSS

.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%;
}