элемент: наведите указатель на множество элементов: есть ли ярлык?

Question

У меня есть много элементов с :hover эффект в CSS:

#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; 
}