悬停对标题中的社交图标的影响？

Question

I want to have a semi trasparent hover effect on my social icons but cant figure it out. Here is my 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:[e-mail]"><img src="/wp-includes/images/mail.png"/></a>

I see alot off people saying to edit css but i cant find this in my css

here is my website http://ideviceguys.com

Answer 1

You need a hook for your css code. Give your div an id or class. Try adding class="socialIcons to your main div.

<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:[e-mail]"><img src="/wp-includes/images/mail.png"/></a>
</div>

Then add this little nugget to your css.

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

That should give your icons 30% transparency. Consider what the others say around here. They are much smarter than I am.