Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.05.2019, 20:12
Аспирант
Отправить личное сообщение для nathan111777 Посмотреть профиль Найти все сообщения от nathan111777
 
Регистрация: 12.05.2019
Сообщений: 44

Как сделать чтобы при наведении мыши на 1-ин елемент 2-ой становился темнне JS
На одном сайте увидел ефект, сайт розделен на левую часть (div id="woman") и правую (div id="man") когда при наведенни мыши на левую часть правая становиться немного темнее, и наоборот при наведенни мыши на правую левая темнее благодаря стилю background-color: rgba(0,0,0,0.3); Как реализовать это на js? Больше всего интиресует как это реализовать через условный оператор if.Screenshot_2.jpg
Ответить с цитированием
  #2 (permalink)  
Старый 15.05.2019, 08:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,772

nathan111777, ты бы тестовый пример на хтмл сделал бы...
Ответить с цитированием
  #3 (permalink)  
Старый 15.05.2019, 11:06
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

А без 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,773

Сообщение от Dilettante_Pro
А без JS?
наверно это будет сложно.
Сообщение от nathan111777
при наведенни мыши на левую часть правая становиться немного темнее,
Ответить с цитированием
  #5 (permalink)  
Старый 15.05.2019, 11:16
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

рони,
Это я понимаю, но неизвестно: нужно ли, чтобы обе картинки были светлыми когда мышь вне их зоны?
Ответить с цитированием
  #6 (permalink)  
Старый 15.05.2019, 11:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,320

Сообщение от рони
наверно это будет сложно
А если два изображения, нижнее темнее, а у верхнего есть две карты, левая и правая его части. Далее при наведении clip-path: polygon, где обрезается соответствующая сторона.
Ответить с цитированием
  #7 (permalink)  
Старый 15.05.2019, 12:52
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,708

<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>
Ответить с цитированием
  #8 (permalink)  
Старый 15.05.2019, 13:29
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Ценное свойство box-shadow
Ответить с цитированием
  #9 (permalink)  
Старый 15.05.2019, 15:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,773

Malleys,
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы по картинке при нажатии на определенное место вылезала информация о KazZato Общие вопросы Javascript 1 16.05.2018 08:58
Как сделать чтобы срабатывал onload элемента при добавлении на страницу Conus Events/DOM/Window 2 10.06.2016 10:58
Как сделать чтобы слайдер появлялся при клике на картинку? Shinjiru Элементы интерфейса 1 04.11.2013 12:57
Как сделать чтобы элемент появлялся при скроле страницы, у определенного класса. SnakeAce Общие вопросы Javascript 1 30.01.2013 12:32
Как сделать чтобы не закрывать актиыный див при открытии другого дива dimas15 Общие вопросы Javascript 53 21.08.2012 22:27