对标题中的社交图标的悬停效果？答案

【问题标题】：hover effect on social icons in header?对标题中的社交图标的悬停效果？
【发布时间】：2012-08-25 02:54:53
【问题描述】：

我想在我的社交图标上设置一个半透明的悬停效果，但我想不通。这是我的 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

【问题讨论】：

标签： php css wordpress

【解决方案1】：

您的 css 代码需要一个钩子。给你的 div 一个 id 或类。尝试将 class="socialIcons 添加到您的主 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: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% 的透明度。考虑一下其他人在这里说的话。他们比我聪明得多。

【讨论】：

我刚刚尝试过，但在这里并没有完全正常工作是我的网站ideviceguys.com
你快到了。您需要将三个链接包装在一个 div 中，并为该 div 提供类 socialIcons。我给你的鳕鱼适用于 div 中具有“socialIcons”类的任何图像（img）。我会抓住你的代码。
谢谢抱歉，这让我有点困惑。
嘿，我们都必须学习。我实际上只是再次更新了答案。您应该使用我刚刚添加的在实际链接上具有透明度的 CSS。这仍然会使图像透明，因为它们在链接中。
我仍然没有得到效果......我觉得我可能只是错过了一些简单的东西

【解决方案2】：

您必须在 css 中定义它。首先给你的菜单一个 id 或 class，这样你的 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;
}

显然这只是一个例子。我不知道你的实际设计需要什么。我只是向您展示具有导航类的父元素可以选择其中的 a 标签并在悬停时分配效果。这是微不足道的介绍级 css。更具体的回答需要更详细的问题。

【讨论】：