时间戳

首页 > 解决方案 > (CSS) 影响 :hover 上的多个类

javascript - (CSS) 影响 :hover 上的多个类

问题描述

我是 css 新手，我想知道 css 中是否有解决方案，当我将鼠标悬停在 icon2 上时，icon1 也具有相同的悬停效果。之前的图标保持不变，只有后面的图标应该有悬停效果。我知道 + 不起作用只是想展示它应该如何。我在没有 javascript 的情况下尝试过，但如果有解决方案，我也想知道，但我的问题是，如果你只能用 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;
}

标签： javascripthtmlcss

解决方案

您可以使用 where 伪类：

:where(.icon1, .icon2, icon3, icon4):hover{
    color: #28a745;
    transition-duration: 0.3s;
        }

推荐阅读