CODEWITHSUNDEEP
jqueryhover
Marko Kos
Marko Kos

Reputation: 33

jQuery on hover show text for multiple elements

I have social media buttons. Here is code:

<div id="icons">
        <a href="#twitter"><img src="images/twitter.png"></a>
        <a href="#facebook"><img src="images/facebook.png"></a>
        <a href="#tumblr"><img src="images/tumblr.png"></a>
        <a href="#pinterest"><img src="images/pinterest.png"></a>
        <a href="#instagram"><img src="images/instagram.png"></a>
        <a href="#vk"><img src="images/vk.png"></a>
</div>

I want to show text on mouseover right to icon, depends where the pointer is. For example, if mouseover is on Facebook, show text next to Facebook icon. Here is code for text:

<div id="icons-text">
    <div class="hover-text">Like us on Twitter</div>
    <div class="hover-text">Like us on Facebook</div>
    <div class="hover-text">Follow us on Tumblr</div>
    <div class="hover-text">Follow us on Pinterest</div>
    <div class="hover-text">Follow us on Instagram</div>
    <div class="hover-text">Like us on VK</div>
</div>

I want to control that in jQuery. I have code:

$(function() {
     $('.hover-text').hide();
     $('#icons').hover( function() { $('.hover-text').toggle(); } );
});

CSS code:

#icons-text {
    position: fixed;
    top: 50%;
    left: 50px;
    right: 0;
    margin-right: auto;
    margin-left: 10px;
    height: 300px;
    z-index: 999999;
}

.hover-text {
    display: none;
    font-family: 'Roboto', Helvetica, Arial;
    font-size: 9pt;
    height: 48px;
    line-height: 48px;
}

How can I in code select this elements and properly show text?

Upvotes: 0

Views: 1304

Answers (1)

Milind Anantwar
Milind Anantwar

Reputation: 82241

Use:

$('#icons a').hover( function() { 
   $('.hover-text').eq($('#icons a').index($(this))).show();
} , function() { 
   $('.hover-text').eq($('#icons a').index($(this))).hide();
});

Demo

Upvotes: 1

Related Questions