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

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

我看到过很多人说编辑CSS，但我不能在我的CSS

在这里找到，这是我的网站http://ideviceguys.com

来源

2012-08-25 user1623972

你需要一个钩子为您的CSS代码。给你的div一个id或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:[email protected]"><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-25 03:06:24 edumacator

我只是试过这个，并没有在这里工作是我的网站http://ideviceguys.com – user1623972

你到了那里。你需要将你的三个链接包装在一个div中，并给这个类社交图标。我给你的鳕鱼是用div类中的任何图像（img）与“socialIcons”类相关的。我会抓住你的代码。 – edumacator

谢谢抱歉，这对我来说有点令人困惑。 – user1623972

你必须在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:[email protected]guys.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类的父元素可以选择一个标签，并为悬停分配一个效果。这是微不足道的，介绍级别的CSS。更具体的回应将需要更详细的问题。

来源

2012-08-25 03:10:17

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

回答

相关问题