element：悬停在很多元素上：有快捷方式吗？

Question

我在CSS中有很多具有:hover效果的元素：

#twitterbt:hover, #googleplusbt:hover, #facebookbt:hover, #twitterfollow:hover, #googleplusfollow:hover, #facebookfollow:hover, #pinterest:hover {
    opacity: 0.7
}

是否有缩短CSS代码的快捷方式（甚至可能对性能产生轻微影响）？

我认为唯一的方法是为每个元素添加一个类，但我不知道是否有好主意，是否有其他方法。

Answer 1

在HTML中为每个元素指定相同的类;

<div id="twitterbt" class="socialMedia"> ....

然后在CSS中使用类选择器;

.socialMedia:hover{
    opacity:0.7;
}