soy nuevo en css y me preguntaba si hay una solución en css donde cuando paso el mouse sobre icon2 e icon1 también tiene los mismos efectos de desplazamiento. los íconos anteriores permanecen intactos, solo los íconos posteriores deben tener el efecto de desplazamiento. sé que + no funciona solo quería mostrar cómo debería ser. Lo probé sin javascript, pero si hubiera una solución, también me gustaría saberlo, pero mi pregunta aquí es si puedes hacerlo solo con css.
<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; }Podrías usar where pseudo-clase:
:where(.icon1, .icon2, icon3, icon4):hover{ color: #28a745; transition-duration: 0.3s; }