标题中社交图标的悬停效果 - hover effect on social icons in header?

hover effect on social icons in header?

本文关键字：悬停图标标题 | 更新日期: 2023-09-27

我想在我的社交图标上有一个半透明的悬停效果，但无法实现。这是我的头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

您的css代码需要一个钩子。给div一个id或class。尝试将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: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%的透明度。想想周围其他人怎么说。他们比我聪明得多。

您必须在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;
}

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