Show DIV on hover on another DIV

Question

I have this small code http://jsfiddle.net/largan/2n2Lf/3/

<div class=socialicons>
    <div class=soc_button>
        <img class=socialicons_effect src=http://www.mangoresort.com/images/icons/pinterest.png width=48 alt="Pinterest">
        <div class=soc_text>Follow us on Pinterest</div>
    </div>
</div>

What I am trying to achieve is when you hover on the icon (soc_button), the soc_text to show within the soc_button".

I have tried the solutions on some similar posts here, but nothing worked.

Thanks

Did you check out this post? http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css — james, May 02 '14 at 15:33
possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Paulie_D, May 02 '14 at 15:34

james · Accepted Answer · 2014-05-02T15:51:52.523

1

I added (for right aligned text)

.soc_text {
    display:none;
    text-align:right;
    float:right;
    margin-top: 15px;
    margin-right: 20px;
}
.soc_button:hover .soc_text {
    display: inline;
}

jsfiddle

Or alternatively for centered text...

.soc_text {
    display:none;
    text-align: center;
    padding-top: 15px;
}
.soc_button:hover .soc_text {
    display: block;
}

jsfiddle

edited May 02 '14 at 15:51

answered May 02 '14 at 15:35

james

3,625
6
30
55

I am trying to add some fading as well **http://jsfiddle.net/largan/2n2Lf/15/** but it doesnt want to work. Any ideas? I got the functionality from this example **http://jsfiddle.net/ynUKx/1/** – lStoilov May 03 '14 at 08:04
Here are two options I came up with. Both use the [jQuery](http://jquery.com/) library. The second one uses [jQuery UI](http://jqueryui.com/) also. Instead of doing the `:hover` effects with CSS like before, it made more sense to do them with jQuery since you wanted the fadeIn/fadeOut effects also. Basically the fiddle's are finding the `data-btn` & `id="text-` for each element and then only showing/hiding the one you hover over (as opposed to it showing/hiding them all at once). Here are the fiddle's I came up with: http://jsfiddle.net/jamez14/2n2Lf/28/ http://jsfiddle.net/jamez14/2n2Lf/29/ – james May 04 '14 at 00:20
Actually, it looks like there are some bugs I didn't see the first time around. I'll take a look at them tomorrow...but that should be enough to get you started. Or for a faster answer, just ask another question here on Stackoverflow. Everyone here will probably be able to come up with a much more elegant solution. – james May 04 '14 at 00:22
Any idea how I can make when hover the text to show on the left side instead of the right one? – lStoilov May 09 '14 at 08:41

score 1 · Answer 2 · answered May 02 '14 at 15:44

Ok, the answers are correct. But, to have a better alignment you could turn it into display:table-cell, to text will be vertically aligned.

.soc_button:hover .soc_text
{
    display:table-cell;
    vertical-align: middle;
}

Of course, you must add display:table; to soc_button class.
Check it out: http://jsfiddle.net/2n2Lf/13/

Show DIV on hover on another DIV

2 Answers2