i am new to css and i was wondering if there is a solution in css where when i hover on icon2 and icon1 also has the same hover effects. the icons before remain untouched only the icons behind should have the hover effect. i know that + doesn't work just wanted to show how it should be. i tried it without javascript but if there was a solution with it i would also like to know but my question rather here is if you can do it with css only.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="icon1"><i class="glyphicon glyphicon-cloud"></i></div>
<div class="icon2"><i class="glyphicon glyphicon-remove"></i></div>
<div class="icon3"><i class="glyphicon glyphicon-user"></i></div>
<div class="icon4"><i class="glyphicon glyphicon-envelope"> </i></div>
</body>
</html>
css:
.icon1 i:hover {
color: #28a745;
transition-duration: 0.3s;
}
.icon2 i:hover + .icon1 i {
color: #28a745;
transition-duration: 0.3s;
}
.icon3 i:hover + .icon2 i + .icon1 i {
color: #28a745;
transition-duration: 0.3s;
}
.icon4 i:hover + .icon3 i + .icon2 i + .icon1 i {
color: #28a745;
transition-duration: 0.3s;
}
.icon1, .icon2, .icon3, .icon4 {
float: left;
padding: 5px;
}
You could use where pseudo-class:
:where(.icon1, .icon2, icon3, icon4):hover{
color: #28a745;
transition-duration: 0.3s;
}