Почему дергается страница на hover?

Единственное, что выяснил, что дергается, если у Title margin-top: auto либо BoxContainer имеет justify-content: flex-end

Почему дергается страница на hover?

Убрал эти строчки кода, всё равно дергается (из-за того, что для меню я даю display: block)

Почему дергается страница на hover?

Ну да, я в ховере меняю картинку
с
background-image: url(${({ backgroundImageSrc }) => backgroundImageSrc});
на
background-image: url(${({ backgroundImageSrc }) => backgroundImageSrc}),
linear-gradient(rgba(61, 34, 21, 0.7), rgba(61, 34, 21, 0.7));

Почему дергается страница на hover?

Makssof, не буду)))

Почему дергается страница на hover?

Дерганье происходит только на левую сторону если наводиться, странно

Почему дергается страница на hover?

Нету
Вот код компонента

const component = () => {
  return (
    <Wrapper>
      <Box backgroundImageSrc="https://picsum.photos/1500/1500">
        <BoxContainer>
          <Title>Man</Title>
          <Menu>
            <MenuItem>Clothes</MenuItem>
            <MenuItem>Shoes</MenuItem>
            <MenuItem>Bags</MenuItem>
          </Menu>
        </BoxContainer>
      </Box>
      <Box backgroundImageSrc="https://picsum.photos/1500/2200">
        <BoxContainer>
          <Title>Woman</Title>
          <Menu>
            <MenuItem>Clothes</MenuItem>
            <MenuItem>Shoes</MenuItem>
            <MenuItem>Bags</MenuItem>
          </Menu>
        </BoxContainer>
      </Box>
    </Wrapper>
  );
};

export default component;

import styled from "styled-components";

export const Wrapper = styled.section`
  margin: 40px auto;
  width: 90%;
  height: 780px;
  display: flex;
`;

export const Menu = styled.ul`
  margin-top: 80px;
  display: none;
`;

export const MenuItem = styled.li`
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  padding: 20px 80px;
  font-family: Quicksand;
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  color: #fff;

  &:hover {
    margin: -1px;
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
`;

export const Box = styled.div`
  width: 50%;
  height: 100%;
  background-image: url(${({ backgroundImageSrc }) => backgroundImageSrc});
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  background-size: cover;
  &:hover {
    background-image: url(${({ backgroundImageSrc }) => backgroundImageSrc}),
      linear-gradient(rgba(61, 34, 21, 0.7), rgba(61, 34, 21, 0.7));
    ${Menu} {
      display: block;
    }
  }
`;

export const BoxContainer = styled.div`
  padding: 20% 25%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-end;
`;

export const Title = styled.h1`
  font-family: Rozha One;
  font-style: normal;
  font-weight: normal;
  font-size: 72px;
  line-height: 87%;
  color: #fff;
`;

Как настроить grids css распологать элементы поколонно без фиксированной высоты?

Рустам Байназаров, спасибо

Почему не получается закрыть popup окно с помощью puppeteer?

anakondoz, да

ReactJs: Material ui кнопка, открывающая Select, как правильно реализовать?

Мне нужно, чтобы Select input был невидим в DOM, была только кнопка, а ниже относительно ее положения открывались MenuItems. В примере такого нету, вот что пока получается

React-native не распознает JAVA_HOME, why?

Спасибо, не заметил)
Это уже совсем другой вопрос, но у меня после перезагрузки стало выскакивать такое

Я уже переустанавливал джаву, в дефолтах к .jar типу стоит это, но там особо выбора и нет)

Как исправить ошибку с event handler и ts?

Robur, понял, не увидел сразу, спасибо)

Как исправить ошибку с event handler и ts?

В контейнере рендерю , туда же в параметры передаю onClickColorChange={handleColorChange} в container.tsx

Как отрезать не помещающийся текст?

Одиночка Айс, Сергей дал хороший ответ.

Как отрезать не помещающийся текст?

Сергей Карвасарный, спасибо, то что нужно!

Как отрезать не помещающийся текст?

Одиночка Айс, там ситуация такая: на десктопе текст переносится, потому что ширина маленькая из-за 4 карточек в линию, на планшете текст не переносится, потому что карточки в линию 2, ширина больше.

Как отрезать не помещающийся текст?

Одиночка Айс, с беком фиксированную только если брать, каждый ресайз дергать бек такое себе

Почему webpack ругается на импорт React компонента?

Антон Спирин, если добавить .jsx к App, то получается такая ошибка

Почему webpack ругается на импорт React компонента?

Антон Спирин,

const path = require("path");
const webpackNodeExternals = require("webpack-node-externals");

module.exports = {
  target: "node",
  entry: "./server.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
    publicPath: "/build"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: "/node_modules/",
        options: {
          presets: [
            "react",
            "stage-0",
            ["env", { target: { browser: ["last 2 versions"] } }]
          ]
        }
      }
    ]
  },
  externals: [webpackNodeExternals()]
};

Как сделать адаптивный кружок в grid ячейке?

Что плохого в том, что всё в гридах?

Как в зависимости от роута React App менять глобальный redux store?

Ты тут живешь что ли?)