Форум

nathan111777 · #1 (**permalink**) 14.05.2019, 20:12

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

ksa · #2 (**permalink**) 15.05.2019, 08:02

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

Dilettante_Pro · #3 (**permalink**) 15.05.2019, 11:06

А без 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>

рони · #4 (**permalink**) 15.05.2019, 11:10

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

А без JS?

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

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

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

Dilettante_Pro · #5 (**permalink**) 15.05.2019, 11:16

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

laimas · #6 (**permalink**) 15.05.2019, 11:39

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

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

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

Malleys · #7 (**permalink**) 15.05.2019, 12:52

<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>

Dilettante_Pro · #8 (**permalink**) 15.05.2019, 13:29

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

рони · #9 (**permalink**) 15.05.2019, 15:41

Malleys,

Форум

Справочник

Discord чат

Курсы javascript