如何制作一个：悬停也控制img背景？

Question

我想我今天需要一个更聪明的前端编码忍者的帮助。

所以现在我的标题中有一些社交媒体图标，在翻转时我想要改变图标的​​img背景颜色以及文本颜色。

现在我的li设置方式如果我翻转图标图像，两个项目（图标背景和文本颜色）都会改变，但是当我只翻转文本时不会发生这种情况。当我仅翻转文本链接时，只会更改文本颜色，而不会更改图标背景。

你可以在这里看到： http://s433108212.onlinehome.us/

当前HTML：

<div id="social_media">
    <ul id="social_icons">
        <li class="mail_chimp"><script type="text/javascript" language="JavaScript" src="http://athenasweb.us5.list-manage.com/subscriber-count?b=37&amp;u=d789790b-2a29-4119-8a43-0d71267eb0d7&amp;id=bc095e8eb4"></script></li>
        <a href="#" title="Subscribe to our Newsletter"><li class="social_li ico_newsletter"><p class="float-left">Get Email Newsletter</p><img src="http://s433108212.onlinehome.us/img/ico_newsletter.png" alt="Newsletter"/></a></li>
        <a href="http://facebook.com/athenasweb" title="Like our Facebook Page"><li class="social_li ico_facebook"><p class="float-left">Our Facebook Page</p><img src="http://s433108212.onlinehome.us/img/ico_facebook.png" alt="Facebook"/></a></li>
        <a href="http://twitter.com/athenas_web" title="Follow on Twitter"><li class="social_li ico_twitter"><p class="float-left">Follow us on Twitter</p><img src="http://s433108212.onlinehome.us/img/ico_twitter.png" alt="Twitter"/></a></li>
        <!-- <li><p>RSS Feed</p><img src="img/icon_rss.png" alt="RSS"/></li> -->
    </ul>
</div><!-- social_media -->

当前的CSS：

.social_li { list-style-type:none; font-family: 'Raleway', sans-serif; line-height:     32px; font-size: 16px; font-weight: 700; cursor: pointer; }
.social_li a { color:#4098db; }
.social_li a:hover { color:#fff; }
.social_li p { float: right; text-align: left; }

.ico_newsletter img, .ico_facebook img, .ico_twitter img {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    background: #cc0033;
    background-position:top center;
}
.ico_newsletter img {
    background: #cc0033;
}
.ico_facebook img {
    background: #064771;
}
.ico_twitter img {
    background: #00aced;
}
.social_li img:hover { 
    background: #666;
}

现在我想我需要更新这一行：

.social_li a:hover { color:#fff; }

我试过了：

.social_li a:hover { color:#fff; background:#666; }

然而，当我翻阅文本时，这产生了这个结果：

我相信那是因为我无法制作a：悬停控制特定的img背景。

之前还有其他人尝过这个吗？思考？ ：）

Answer 1

您应该使用的方法是sprite sheets。

例如;在我的网站上，我在页脚中有一些社交图标，这些图标都是由这个图像组成的：

我在这里做的是将顶行设置为包含标准图像，将底行设置为包含翻转状态。

如果要更改文本颜色和图像，首先要为图像（将是背景图像）和文本创建容器：

<a href="#facebook" class="social fb">
    <div></div>
    Facebook
</a>

然后是一些CSS：

a.social
{
    text-decoration: none;
    color: #000;
    display: inline-block;
}

a.social:hover
{
    color: #F00;
}

a.social > div
{
    height: 20px;
    background: url(http://martywallace.com/view/textures/sprite/social.png) no-repeat;
}

a.social.fb > div
{
    background-position: -15px 0;
}


/* Notice here how we target the child div of the a element being hovered over. */
a.social.fb:hover > div
{
    /* We change the background-position to sample a new portion of the sprite. */
    background-position: -15px -20px;
}

我已在此JSFiddle (http://jsfiddle.net/gd4ha/)创建了一个包含社交图标的完整示例。

Answer 2

查看前两个答案here。

基本上，jQuery可能是你最好的选择。

Answer 3

您的问题是文本在代码中的级别低于图像，因此应用于图像的更改也会影响文本，反之则不然。您是否尝试使用Javascript更改文本鼠标悬停操作的图像？

document.getElementByClassName("your-classname-here").setAttribute("class","new-classname-here");

Answer 4

我会将图标背景颜色包含在图标本身的一部分中。有2个版本的图标，一个是标准的bg颜色，一个是灰色的bg。然后在列表项上创建图标背景图像，并在列表项悬停时简单地交换背景图像。改变了这段代码的整个方法，但我认为它会更好。

Answer 5

虽然图像和文本内部显然只是一个元素（一个按钮），但从CSS的角度来看（取决于它的编码方式）它们通常看起来是两个独立的元素。

'a：hover'是'a'的特例，仅适用于'anchor'（＆lt; a ...）语句。你还有一个'image'（＆lt; img ...）语句，所以也需要'img：hover'。 （你知道它们是相关的，但CSS没有。： - ）

您还将属性名称拼错为'background'，它应该是'background-color'。

所以要在CSS中完全执行此操作，您可能需要一些带有两个单独语句的笨拙代码，例如：
.social_li a：悬停{color：#fff; }
.social_li img：hover {background-color：＃666; }

在任何情况下，默认情况下，图像指定每个像素，并且不显示颜色。 （想到这一点的另一种方法是CSS不知道您认为图像的哪个部分是“背景”。）您可能需要获得“半透明”（每隔一个像素显示）或“透明”（每个像素显示）通过选定的区域）图像。

或许你可以采用一种完全不同的方法做得更好：或许正如另一个回应中所提到的那样，单独的'向上'和'向下'图像由Javascript交换，或者可能只突出显示按钮周围的边框保持其内部不变，或者可能只改变文字的颜色，或者可以在每个按钮的顶部放置一个半透明的平纹棉布，你可以着色，或者...... ...