Question

我希望对我的社交图标产生半透明的悬停效果，但无法弄明白。这是我的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

Answer 1

你的css代码需要一个钩子。给你的div一个id或class。尝试将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％的透明度。考虑其他人在这里说的话。他们比我聪明得多。

Answer 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;
}

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

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

2 个答案: