-3

Web サイトを更新していて、この記事を使用しました HTML と CSS を使用して Web サイトにソーシャル アイコンを表示するにはどうすればよいですか? 私のウェブサイトにいくつかのソーシャル メディアのアイコンを追加します。

今、どうすればホバー効果を達成できるのか、つまり不透明度を変更できるのか疑問に思っています)。これはほんの数行のコードであることはわかっていますが、それを達成する方法がわかりません（CSS初心者）

4

5 に答える 5

8

class で特定の要素をターゲットにする場合は、次のように (CSS) .email:

.icons .email:hover {
    // Your code here
    opacity: .5;
}

より一般的な解決策が必要な場合は、すべての要素に同じクラス (.iconこの例では) を指定して、次のようにします。

.icons:hover {
    // Your code here
    opacity: .5;
}

CSSのカスケードと継承について読みたいと思うかもしれません。

于 2013-03-28T14:25:28.147 に答える
1

これには不透明度は必要ありません。表示属性を使用することもできます。これは、クラス アイコンを含む画像を含むすべてのラベルで機能します。

画像の代用として青い背景を追加しました。

デモ

HTML:

<label class="labelWithIcon"><img class="icon" />test</label>

CSS:

.labelWithIcon .icon{
    display:none;
    width:10px;
    height:10px;
    background-color:blue;
}

.labelWithIcon:hover .icon{
    display:inline;
}

.labelWithIcon{
    padding-left:10px;
}

.labelWithIcon:hover{
     padding-left:0px;   
}

編集：セレクターを「ラベル」よりも具体的にしました

于 2013-03-28T14:30:23.913 に答える
1

これは、次のコードで簡単に実行できます。

.className:hover (or) #id:hover{
opacity:0.5;
}
于 2013-03-28T14:26:35.373 に答える
1 
div:hover{ do: something }

CSS セレクターの詳細については、こちらをご覧ください

于 2013-03-28T14:27:02.103 に答える
0

:hover疑似クラスを使用できます。

.social:hover{opacity: .7;}
于 2013-03-28T14:28:09.280 に答える