Javascript-форум - Как сделать чтобы при наведении мыши на 1-ин елемент 2-ой становился темнне JS

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как сделать чтобы при наведении мыши на 1-ин елемент 2-ой становился темнне JS (https://javascript.ru/forum/misc/77509-kak-sdelat-chtoby-pri-navedenii-myshi-na-1-element-2-ojj-stanovilsya-temnne-js.html)

Как сделать чтобы при наведении мыши на 1-ин елемент 2-ой становился темнне JS

На одном сайте увидел ефект, сайт розделен на левую часть (div id="woman") и правую (div id="man") когда при наведенни мыши на левую часть правая становиться немного темнее, и наоборот при наведенни мыши на правую левая темнее благодаря стилю background-color: rgba(0,0,0,0.3); Как реализовать это на js? Больше всего интиресует как это реализовать через условный оператор if.Вложение 4163

nathan111777, ты бы тестовый пример на хтмл сделал бы...

А без JS?

<style>
.box { position:relative;}
.cont   {
   position:relative;
   display:inline-block;
   height:100px;
   width:100px;   
}
.layer {
   position:relative;
   top:0px;
   left:0px; 
   background-color: rgba(0,0,0,0.3);
   height:100%;
   width:100%;
   z-index:2;
}
img {
   position:absolute;
   top:0px;
   left:0px;
   height:100%;
   width:100%;
   z-index:1; 
}
.layer:hover { background-color: rgba(0,0,0,0);}
</style>
<div class="box">
   <div class="cont">
      <div class="layer"></div>
      <img src="https://javascript.ru/cat/list/donkey.gif">
   </div>
   <div class="cont">
      <div class="layer"></div>
      <img src="https://javascript.ru/cat/list/donkey.gif">
   </div>
</div>

Цитата:

Сообщение от Dilettante_Pro

А без JS?

наверно это будет сложно.

Цитата:

Сообщение от nathan111777

при наведенни мыши на левую часть правая становиться немного темнее,

рони,
Это я понимаю, но неизвестно: нужно ли, чтобы обе картинки были светлыми когда мышь вне их зоны?

Цитата:

Сообщение от рони

наверно это будет сложно

А если два изображения, нижнее темнее, а у верхнего есть две карты, левая и правая его части. Далее при наведении clip-path: polygon, где обрезается соответствующая сторона.

<style>

html {
  background: black url(https://pbs.twimg.com/media/CpBMyoYWYAQRazW.jpg) top center / cover no-repeat;
  height: 100%;
  font: 1em "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
}

body {
  display: flex;
  height: 100%;
	margin: 0;
}

body > section {
  flex: 1;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 10vmin;
  transition: 500ms;
}

body > section:last-of-type {
  align-items: flex-end;
}

body > section > h1 {
  text-transform: uppercase;
}

body > section > a {
  color: inherit;
  text-decoration: none;
  line-height: 2em;
}

body > section:hover {
  box-shadow: 0 0 0 50vmax rgba(0, 0, 0, .5);
  z-index: 1;
}
  
</style>

<body>
  <section>
    <h1>Женщинам</h1>
    <a href="#">Распродажа</a>
    <a href="#">Одежда</a>
    <a href="#">Верхняя одежда</a>
    <a href="#">Обувь</a>
    <a href="#">Сумки и украшения</a>
  </section>
  <section>
    <h1>Мужчинам</h1>
    <a href="#">Распродажа</a>
    <a href="#">Одежда</a>
    <a href="#">Верхняя одежда</a>
    <a href="#">Обувь</a>
    <a href="#">Сумки и украшения</a>
  </section>
</body>

Ценное свойство box-shadow:victory:

Malleys,
:victory: