Question

我有选择语言下拉菜单。

当标记悬停时，它应显示语言选项并保持显示状态。当鼠标离开语言选项或标志再次悬停时，应隐藏语言选项。我尝试了，但它立即显示和隐藏。

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此处。

Answer 1

$( "#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.
      });
   }
});

jquery show hide div悬停并保持可见性直到mouseout

1 个答案: