2016-05-09 58 views
0

私は、ユーザーがそれらの上を移動したときに少し退色したいと思うかなりの要素があるまともなプロジェクトに取り組んでいます。これは私の現在のコードです:割り当て:要素ではなくクラスに移動する

.brand-images img, 
.horList li a, 
.producto__descripcion a, 
.slider-btn, 
.social-media__banner a, 
.marca-productos__foto, 
.marca-productos__nuevos-productos a, 
.producto-zona__image a, 
.campanas a { 
    opacity: 1; 
} 

.brand-images img:hover, 
.horList li a:hover, 
.producto__descripcion a:hover, 
.slider-btn:hover, 
.social-media__banner a:hover, 
.marca-productos__foto:hover, 
.marca-productos__nuevos-productos a:hover, 
.producto-zona__image a:hover, 
.campanas a:hover { 
    opacity: .5; 
} 

これは明らかにあまり簡潔ではありません。私の質問です::hover疑似クラスを通常のCSSクラスに割り当てることは可能ですか?このようなものが、私が念頭に置いていたものです。

.hover-fade { opacity: 1; } 
.hover-fade:hover { opacity: .5 } 

こうすれば、私が望む要素にそのクラスを適用することができます。それが不可能な場合は、CSSをどのようにカットするかについての他の提案も歓迎します。

+0

あなたはそれを試してみましたか? – Sami

+1

本当ですか?あなた自身でそれをチェックするのと同じように10秒を費やすのではなく、あなたはSOに行き、質問を書いて時間を過ごしましたか?はい、可能です。 – dfsq

答えて

1

:hoverは、:hover疑似要素を持つ任意の有効なCSSセレクタに適用できます。

div.wrapper a[name="link"]:hover, 
 
a:hover, 
 
a.a:hover, 
 
[name="link"]:hover, 
 
div a:hover, 
 
.link, 
 
.wrapper .link { 
 
    color: red; 
 
}
<div class="wrapper"><a name="link" class="a">Link</a> 
 
</div>

関連する問題