@antonstolar

Как сделать на React чтобы при наведении на левую часть сайта правая становилась темнее и наоборот?

Здравствуйте.
Хотел бы узнать у знающих людей, как реализовать приведенный ниже код в React приложение? Просто проблема заключается в том, что я пока что достаточно поверхностно разбираюсь в React и синтаксисе Babel. А сам код может понадобиться в скором времени в реализации совместно с React.

Задача такая:
Есть главная страница сайта, на одной части (левой) список товаров для женщин на второй(правой) для мужчин, когда я навожу мышь на левую часть то правая становится темнее, и наоборот если на правую навожу, то левая становится теменне.
Примерно так:
мышь на левой части:
5d4d22ce36de1795466718.jpeg
мышь на правой части:
5d4d230abcdf8545369673.jpeg

Пример кода (HTML, CSS, JS).

<div id="left">
</div>


<div id="right">
</div>


let left = document.getElementById('left');
let right = document.getElementById('right');

left.addEventListener('mouseover', () => {
  right.classList.add('dark');
});
left.addEventListener('mouseleave', () => {
  right.classList.remove('dark');
});

right.addEventListener('mouseover', () => {
  left.classList.add('dark');
});
right.addEventListener('mouseleave', () => {
  left.classList.remove('dark');
});


#left{
    height: 940px;
    width: 50%;
    position: absolute;
    top:0px;
    
    
}
#right{
    height: 940px;
    width: 50%;
    position: absolute;
    top:0px;
    left:50%;
}
.dark {
  background-color: rgba(0,0,0,0.5);
}
  • Вопрос задан
  • 143 просмотра
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
<div id="app"></div>

function App() {
  const [ dark, setDark ] = React.useState(null);
  const updateDark = e => setDark(e.type === 'mouseover' ? e.currentTarget.id : null);

  return (
    <React.Fragment>
      {[ 'left', 'right' ].map(n => (
        <div
          id={n}
          key={n}
          onMouseOver={updateDark}
          onMouseLeave={updateDark}
          className={dark && dark !== n ? 'dark' : ''}
        ></div>
      ))}
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));
Ответ написан
pterodaktil
@pterodaktil
js developer
один из вариантов
const [mousePosition, setMousePosition] = useState(null);
const clL = {
  "dark": mousePosition === "left"
}
const clR = {
  "dark": mousePosition === "right"
}

return (
  <>
    <div id="left" onMouseOver={() => setMousePosition("left") className={cx(clL)} onMouseLeave={() => setMousePosition(null)}></div>
    <div id="right" onMouseOver={() => setMousePosition("right") className={cx(clR)} onMouseLeave={() => setMousePosition(null)}></div>
  </>
)

Но это если сильно хочется. А вообще, такая вещь делается одной строкой в css:
#left:hover {
    background-color: rgba(0,0,0,0.5);
  }
  #right:hover {
    background-color: rgba(0,0,0,0.5);
  }
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
notiv-nt
@notiv-nt
Сделать обе темными, а при наведении светлыми
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы