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%);
        }
    }
}

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

1 个答案: