show div on hover and stay till mouseleave?

Question

when hovering on ".socialIcons", i want the div ".socialIconsShow" to fade in, and when I move the mouse to hover over ".socialIconsShow" they fadeout. Is there a way to have the icons stay visible after leaving ".socialIcons"?

<div class="socialNetworks">
          <ul>
            <li><a href="#">Configure</a></li>
            <li><a href="#">Contact</a></li>
            <li class="socialIcons"><a href="#">Follow</a></li>
          </ul>
        </div>
         <div class="socialIconsShow">
          <div class="facebook"></div>
          <div class="twitter"></div>
          <div class="linkedin"></div>
        </div>
       </div>

Here's the link for you see what's going on: http://www.imsmfg.com/new/test/index.php

Here's what i have to make it work currently: $(".socialIcons").mouseenter(function(){ $(".socialIconsShow").fadeIn('slow') }).mouseleave(function(){ $(".socialIconsShow").fadeOut('slow'); }); — kamalo, Aug 17 '11 at 16:02

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

I believe this is exactly the same kind of thing I responded to yesterday:

jQuery: Mousover on a div open submenu which should stay open when mouseout

edited May 23 '17 at 12:04

Community

1
1

answered Aug 17 '11 at 15:56

maxedison

17,243
14
67
114

In the fiddle i provide in that answer, you should just change show() & hide() to fadeIn() & fadeOut() respectively. – maxedison Aug 17 '11 at 15:59

score 1 · Answer 2 · answered Aug 17 '11 at 15:58

If you change your markup a little you should be sorted.

<div class="socialNetworks">
    <ul>
        <li><a href="#">Configure</a></li>
        <li><a href="#">Contact</a></li>
        <li class="socialIcons">
            <a href="#">Follow</a>
            <!-- Jam these in here -->
            <div class="socialIconsShow">
                <div class="facebook"></div>
                <div class="twitter"></div>
                <div class="linkedin"></div>
            </div>
        </li>
    </ul>
</div>

score 0 · Answer 3 · answered Aug 17 '11 at 15:57

0

You can do it by re-structuring your markup and using the :hover selector like this.

This will not fade in / out. It will just show / hide.

answered Aug 17 '11 at 15:57

Spycho

7,698
3
34
55

show div on hover and stay till mouseleave?

3 Answers3