Блог

У меня есть div, который охватывает всю мою страницу с помощью нескольких кнопок. Однако div прозрачен. Я разместил видео позади div, которое я хотел бы иметь возможность запускать и останавливать. Конечно, только когда я нажимаю где-то, что не является кнопкой. Но в настоящее время div использует щелчок. Я бы хотел, чтобы щелчок распространился на элемент за ним. Тем не менее, я бы все равно хотел, чтобы он блокировал свайпы.

CSS

 .root {
    display: grid;
    grid-template-columns: 0.7fr 1fr 0.7fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas: "left center right";
    height: 100vh;
    width: 100vw;
    position: absolute;
}
 

HTML

 <div
   className="root"
   style={{
      display: "grid"
      width: `calc(100% - ${arg1? arg3: 0}px)`,
      height: `calc(100% - ${arg2 ? arg4: 0}px)`,
      backgroundColor: "#ffffff00",
   }}
   onClick={(ev) => {
      console.log("cl");
   }}
>
 

Вам нужно свойство pointer-events: none; css.