0

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

所以现在我的标题中有一些社交媒体图标，在滚动时我希望图标的 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:hover 控制特定的 img 背景。

有没有其他人尝试过这个？想法？:)

4

5 回答 5

1

您应该在这里使用的方法是sprite sheet。

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

在此处输入图像描述

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

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

<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/)上创建了一个包含两个社交图标的完整示例。

于 2012-09-26T23:49:27.547 回答
0

看看这里的前两个答案。

基本上，jQuery 可能是您的最佳选择。

于 2012-09-26T17:25:20.533 回答
0

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

document.getElementByClassName("your-classname-here").setAttribute("class","new-classname-here");
于 2012-09-26T17:28:52.747 回答
0

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

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

您还将属性名称拼错为“背景”，而它应该是“背景颜色”。

因此，要完全在 CSS 中执行此操作，您可能需要一些带有两个单独语句的笨拙代码，例如：
.social_li a:hover { color:#fff; }
.social_li img:hover { 背景颜色:#666; }

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

或者，也许您会使用完全不同的方法做得更好：也许正如另一个响应中指出的那样，通过 Javascript 将“向上”和“向下”图像分开，或者仅突出显示按钮周围的边框，使其内部保持不变，或者更改颜色只有文本，或者可能是覆盖在每个按钮顶部的半透明稀松布，您可以着色，或者......

于 2012-09-26T19:54:01.520 回答
0

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

于 2012-09-26T17:36:46.953 回答