1

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;
}
E.D
  • 11
  • 1

1 Answers1

0

You could use where pseudo-class:

:where(.icon1, .icon2, icon3, icon4):hover{
    color: #28a745;
    transition-duration: 0.3s;
        }
Zrelli Majdi
  • 1,204
  • 2
  • 11
  • 16