将悬停事件链接到 2 个或更多元素

Question

您好，我想知道如何链接悬停事件来更改相关元素。例如，我想让它悬停在链接或图标上，它会同时改变它们的样式。现在在我的 sass/scss 我有 CSS：

.iconlinks {
    color:$linkscolor;

    &:hover {
        color:darken($linkscolor,20%);
    }
}      
#icons {
    a:hover {
        i {
           color: darken($primary-color, 20%);
        }
    }
}

HTML：

<div id="icons" class="row">
    <div class="medium-4 large-4 text-center column adjust">
        <a href="#"><i id="promotional" class="fi-calendar"></i></a>
        <h4><a class="iconlinks" href="#">text</a></h4>
        <p>Text ect</p>
    </div>
</div>

所以，我想将鼠标悬停在.iconlinks 或#icons 上会改变两者的样式。 我听说过使用像:before 和:after 这样的伪元素，但我还没有真正了解它们的用法以及它们是否适用。那么，实现这一目标的最佳方法是什么？

我也试过了：

        <div class="medium-4 large-4 text-center column adjust">
          <a class"dualhover" href="#"><i id="promotional" class="fi-calendar"></i>
        <h4><a class="iconlinks" href="#">Promotional Items</a></h4></a>

css:

.dualhover:hover{
#promotional{color: darken($linkscolor,10%);}
.iconlinks{
 color: darken($linkscolor,10%);
 }
 }

我的代码开始变得混乱，我需要清理一下。必须有一种更简单的方法来做到这一点。

Answer 1

如果您将鼠标悬停在 #icons，那么您将悬停整个区块（隐含地 .iconlinks）。所以你不必关心.iconlinks:hover状态：

#icons {
    .iconlinks {
        color:$linkscolor;
    }
    &:hover {
        .iconlinks {
            color:darken($linkscolor,20%);
        }
        a i {
            color: darken($primary-color, 20%);
        }
    }
}