CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paramasivan
Paramasivan

Reputation: 791

jquery show hide div on hover and retain visibility until mouseout

I have select language drop down menu.

When the Flag is hovered it should display the language options and remain showed. When the mouse leaves the language options or when the flag is hovered again the language options should be hidden. I tried but it is showing and hiding instantly.

Html:

<a href="" class="lang"><img src="images/english.jpg" alt="en" id="langflag"></a>
        <div class="select-lang" style="display:none;">
              <h2>In Your Language</h2>
               <ul>
               <li><a href=""><img src="images/in_14.png" alt="in"> हिन्दी   </a></li>
               <li><a href=""><img src="images/es_14.png" alt="es"> Español</a></li>
               <li><a href=""><img src="images/fr_14.png" alt="fr"> Français</a></li>
               <li><a href=""><img src="images/de_14.png" alt="de"> Deutsch</a></li>
               <li><a href=""><img src="images/ro_14.png" alt="ro"> Română</a></li>
               <li><a href=""><img src="images/br_14.png" alt="br"> Brasil</a></li>
               <li><a href=""><img src="images/tr_14.png" alt="tr"> Türkçe</a></li>
               <li><a href=""><img src="images/pl_14.png" alt="pl"> Polski</a></li>
               <li><a href=""><img src="images/pt_14.png" alt="pt"> Português</a></li>
               <li><a href=""><img src="images/ru_14.png" alt="ru"> Русский</a></li>
               <li><a href=""><img src="images/jp_14.png" alt="jp"> 日本語</a></li>
               <li><a href=""><img src="images/it_14.png" alt="it"> Italiano</a></li>
               <li><a href=""><img src="images/hu_14.png" alt="hu"> Magyar</a></li>
               <li><a href=""><img src="images/se_14.png" alt="se"> Svenska</a></li>
               <li><a href=""><img src="images/kr_14.png" alt="kr"> 한국어</a></li>
               <li><a href=""><img src="images/cn_14.png" alt="cn"> 中文</a></li>
             </ul>
             <p><a href="">More Languages &rsaquo;</a></p>
        </div>

jQuery

$(document).ready(function() {
$( "#langflag" ).hover(function() {
   $( ".select-lang" ).slideToggle( 400, function() {
       // Animation complete.
    });
});
});

Fiddle here.

Upvotes: 0

Views: 1093

Answers (1)

GGio
GGio

Reputation: 7643

$( "#langflag" ).on('mouseenter', function() { 
   $( ".select-lang" ).slideToggle( 400, function() {
       // Animation complete.
    });
});

//keep it open if mouse is within #langflag, hide if mouse leaves both
$( ".select-lang, #langflag" ).on('mouseleave', function() {
   if ($(this).attr('id') != 'langflag') {
      $( ".select-lang" ).slideToggle( 400, function() {
         // Animation complete.
      });
   }
});

Upvotes: 3

Related Questions