Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.08.2018, 10:10
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Как реализовать событие для групп при наведении?
Всем привет. Подскажите, как реализовать событие.

Задача:
В svg 10 групп path, при наведении(ховер) на каждую группу происходит некое событие, т.е. визуальная транформация формы группы (сделано через css - hover).
Можно ли через js сделать зависимость групп друг от друга? Т.е., наводя на 2 группу - происходит ховер эффект для нее и для предыдущей. Аналогично для следующих: при наведении на 5 группу, сразу активируются и 1-4 и так по нарастающей.

Последний раз редактировалось madeas, 31.08.2018 в 10:44.
Ответить с цитированием
  #2 (permalink)  
Старый 31.08.2018, 11:36
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Вот такой кривой костыль.
<style>
div {display:inline-block;
height:100px;
width:100px;
border:1px solid grey;
transition-property: border-radius;
transition-duration: 2s;
}
.mover {
   border:2px solid red;
   border-radius:30px;
}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var elems = document.querySelectorAll('div');
[].forEach.call(elems, function(it) {
   it.onmouseover = function() {
      for(var i = 0;i < elems.length; i++) {
         elems[i].classList.add('mover');
         if(elems[i] == it) break;
       }
   }
   it.onmouseleave = function() {
      for(var i = 0;i < elems.length; i++) {
           elems[i].classList.remove('mover');
      }
   }
});
</script>

Последний раз редактировалось Dilettante_Pro, 31.08.2018 в 15:40.
Ответить с цитированием
  #3 (permalink)  
Старый 31.08.2018, 12:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

madeas,
Рейтинг звёздочками
Рейтинг звёздочками 2
звездный рейтинг js

Последний раз редактировалось рони, 31.08.2018 в 12:34.
Ответить с цитированием
  #4 (permalink)  
Старый 31.08.2018, 12:59
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Экстракт из звездочек
<style>
.cont:hover .rating  ~ div{
     opacity: 1
  }
.cont:hover div:hover ~ div, .rating ~ div{
     opacity: .2
  }
.cont:hover {
     opacity: 1
}
.cont {
     opacity: .2
}
div {display:inline-block;
height:100px;
width:100px;
background:black;
}
</style>
<section class='cont'>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</section>
Ответить с цитированием
  #5 (permalink)  
Старый 31.08.2018, 13:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Dilettante_Pro,
вариант ...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
.cont:hover div:hover ~ div, .cont div{
     opacity: .2
  }
.cont:hover div {
     opacity: 1;
}
.cont {
     display: flex;
}
div {
height:100px;
width:100px;
background:black;
}
</style>
</head>

<body>

<section class='cont'>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</section>

</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 31.08.2018, 13:51
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

рони,
Да, так почище код
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие onmouseout при наведении мышки на дочерний элемент фонарик Общие вопросы Javascript 2 26.01.2016 14:01
как реализовать в браузере display:none по ключевым словам для блоков wlad2 Javascript под браузер 14 19.07.2014 09:28
Как реализовать задержку при наведении в меню? Stas-ik Элементы интерфейса 14 20.02.2014 12:21
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24