-4

ソーシャル アイコンに半透明のホバー効果を持たせたいのですが、わかりません。ここに私のheader.phpがあります：

<div align = "right"><a href="https://twitter.com/#!/ideviceguys"><img src="/wp-includes/images/twitter.png"/></a>
<a href="http://www.facebook.com/ideviceguys"><img src="/wp-includes/images/facebook.png"/></a>
<a href="mailto:info@ideviceguys.com"><img src="/wp-includes/images/mail.png"/></a>

CSSを編集するように言っている人がたくさんいますが、CSSでこれを見つけることができません

ここに私のウェブサイトがあります http://ideviceguys.com

4

2 に答える 2

1

CSS コードのフックが必要です。div に ID またはクラスを指定します。メイン div に class="socialIcons を追加してみてください。

<div class="socialIcons">
    <a href="https://twitter.com/#!/ideviceguys"><img src="/wp-includes/images/twitter.png"/></a>
    <a href="http://www.facebook.com/ideviceguys"><img src="/wp-includes/images/facebook.png"/></a>
    <a href="mailto:info@ideviceguys.com"><img src="/wp-includes/images/mail.png"/></a>
</div>

次に、この小さなナゲットを CSS に追加します。

.socialIcons a:hover {
opacity:0.7; filter:alpha(opacity=40); /* Damn MS and IE8 and earlier */
}

これにより、アイコンの透明度が 30% になります。ここで他の人が言うことを考えてみてください。彼らは私よりずっと賢いです。

于 2012-08-25T03:06:24.220 に答える
0

css で定義する必要があります。最初に、メニューに id またはクラスを指定して、css が一般的でない方法でターゲットにできるようにします。

<div class="nav">
    <a href="https://twitter.com/#!/ideviceguys"><img src="/wp-includes/images/twitter.png"/></a>
    <a href="http://www.facebook.com/ideviceguys"><img src="/wp-includes/images/facebook.png"/></a>
    <a href="mailto:info@ideviceguys.com"><img src="/wp-includes/images/mail.png"/></a>
</div>

CSSで：

.nav{
    float:right;
}

.nav a{
    display:block;
    float:left;
    margin-right:10px;
}

.nav a:hover{
    box-shadow: 0px 0px 10px #ff6600;
}

明らかに、これは単なる例です。あなたの実際のデザインが何を求めているのかわかりません。nav のクラスを持つ親要素がその中の a タグを選択し、ホバー時に効果を割り当てることができることを示しているだけです。これは簡単なイントロ レベルの CSS です。より具体的な回答には、より詳細な質問が必要になります。

于 2012-08-25T03:10:17.597 に答える