Question

I think I need the help of a wiser Front End coding Ninja today.

So right now I have some social media icons in my header where on rollover I want the img background color of the icons to change as well as the text color.

Now the way I have my li’s setup both items (icon background and text color) will change if I rollover the icon images, however it does not happen when I only roll over the text. When I rollover only the text link, only the text color changes and not the icon background.

You can see this here:
http://s433108212.onlinehome.us/

Current 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 -->

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

Now I thought I needed to update this line:

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

I tried:

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

However that produced this result when I rolled over just the text:

I believe that’s because I can’t make the a:hover control the specific img background.

Has anyone else tried this before? Thoughts? 🙂

Answer 1

Look at the top two answers here.

Basically, jQuery might be your best option.