-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 或类。尝试将 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% 的透明度。考虑一下其他人在这里说的话。他们比我聪明得多。

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

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

于 2012-08-25T03:10:17.597 回答