Combining MouseOn with CSS Link Hover

Question

I’m using a combination of icons and text for some links in the sidebar on my website, but I want both the icon and text to change if the mouse hovers over either of them. Using MouseOn and ‘hover’ in my CSS file, I’ve managed to get this to work when the mouse hovers over the icon, but if the mouse only hovers over the text, only the text changes but not the icon as well. Does anybody know a way to do this please? A link to my site and the code I’m currently using are below. Thanks everybody.

http://www.retelevise.com

<span class="social-media-sidebar-panel">
<a href="https://www.facebook.com/re.televise" target="_external window fa">
<img src="http://www.retelevise.com/wp-content/themes/myownzee/branding/
socialmedia-facebook-1.png"
onmouseover="this.src='http://www.retelevise.com/wp-content/themes/myownzee/
branding/socialmedia-facebook-2.png'"
onmouseout="this.src='http://www.retelevise.com/wp-content/themes/myownzee/
branding/socialmedia-facebook-1.png'"
class="social-media-sidebar-icons" title="Facebook" alt="Facebook">
<span style="font-size: 0.8em">Facebook</span></a></span>

Answer 1

I've made several changes to the way you've done this:

• Moved your styling and javascript to external files
• Used JQuery for animations (simply easier)

This version now makes use of multiple images.

JSFiddle DEMO

HTML:

<span class="sm">
   <a href="#" class="mediaLink">
        <img class="mediaPic" data-hover="http://placehold.it/60/4477ee/ffffff" src="http://placehold.it/60/224499/ffffff"/>
        <div class="mediaText"> Facebook</div>
    </a>
</span>
<span class="sm">
   <a href="#" class="mediaLink">
        <img class="mediaPic" data-hover="http://placehold.it/60/ee9933/ffffff" src="http://placehold.it/60/777777/ffffff"/>
        <div class="mediaText"> Stack Overflow</div>
    </a>
</span>
<span class="sm">
   <a href="#" class="mediaLink">
       <img class="mediaPic" data-hover="http://placehold.it/60/66aaff/ffffff" src="http://placehold.it/60/3388aa/ffffff"/>
        <div class="mediaText"> Twitter</div>
    </a>
</span>
<span class="sm">
   <a href="#" class="mediaLink">
        <img class="mediaPic" data-hover="http://placehold.it/60/dd1122/ffffff" src="http://placehold.it/60/991122/ffffff"/>
        <div class="mediaText"> YouTube</div>
    </a>
</span>

JavaScript (Using JQuery):

$(document).ready( function() {
    $(".mediaLink").on( {
        mouseenter: function() {  
            $(this).children(".mediaPic").data("static", $(this).children(".mediaPic").attr("src"));
            $(this).children(".mediaText").css("color", "orange");
            $(this).children(".mediaPic").attr("src", $(this).children(".mediaPic").data("hover"));

        }, mouseleave: function() {

            $(this).children(".mediaText").css("color", "white");
            $(this).children(".mediaPic").attr("src", $(this).children(".mediaPic").data("static"));
        }
    });

});

CSS:

.mediaLink {
    display: block;
}

.mediaPic {
    float: left;
    width, height: 60px;
}

.mediaText {
    height: 60px;
    width: 150px;
    padding-left: 10px;
    line-height: 60px;
    background: #242424;
    color: white;
    font-family: "Consolas"," Arial";
    font-size: 18px;
    float: left;
}

.sm {
    margin: 5px;
    float: left;
}

Explanation:

I'm making the <a> change its children (.mediaPic and .mediaText) when its being hovered over. On mouseenter is when the mouse is hovered over, and mouseleave is returning the <a> back to its regular state.

The part called data-hover is the url of the picture you wish to set the image to, where you leave src as the image you want to have as the default. When you hover over the image, the script will "remember" the original src and set it back to that when you leave the image (mouseleave).

Answer 2

try moving your onmouseover and onmouseout events to anchor and change the 'this.' to reference the img by ID.