Как реализовать событие для групп при наведении?
Всем привет. Подскажите, как реализовать событие.
Задача: В svg 10 групп path, при наведении(ховер) на каждую группу происходит некое событие, т.е. визуальная транформация формы группы (сделано через css - hover). Можно ли через js сделать зависимость групп друг от друга? Т.е., наводя на 2 группу - происходит ховер эффект для нее и для предыдущей. Аналогично для следующих: при наведении на 5 группу, сразу активируются и 1-4 и так по нарастающей. |
Вот такой кривой костыль.
<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>
|
|
Экстракт из звездочек
<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>
|
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>
|
рони,
Да, так почище код |
| Часовой пояс GMT +3, время: 18:12. |