Форум

madeas · #1 (**permalink**) 31.08.2018, 10:10

Всем привет. Подскажите, как реализовать событие.

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

Dilettante_Pro · #2 (**permalink**) 31.08.2018, 11:36

Вот такой кривой костыль.

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

рони · #3 (**permalink**) 31.08.2018, 12:30

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

Dilettante_Pro · #4 (**permalink**) 31.08.2018, 12:59

Экстракт из звездочек

<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

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>

Dilettante_Pro · #6 (**permalink**) 31.08.2018, 13:51

рони,
Да, так почище код

Форум

Справочник

Discord чат

Курсы javascript