将悬停内容悬停（） [英] Hover content of a hover()

问题描述

工作示例

我只需要悬停列表内容，就像下拉菜单一样。如何添加脚本来执行该功能？

HTML
$ b

 < button id =test>悬停我< / button> 
< ul class =tester> 
< li>菜单1< / li> 
< li>菜单2< / li> 
< li>菜单3< / li> 
< li>菜单4< / li> 
< li>菜单5< / li> 
< li>菜单6< / li> 
< li>菜单7< / li> 
< li>菜单8< / li> 
< / ul> 
  

脚本
< $ p $ $（document）.ready（function（）{

$（＃test）。hover（
function（）{
$（'。tester'）。slideDown（500）;
}，
function（）{
$（'。tester'）。slideUp（500）;
}）;
}）;


解决方案

与使用.hover（） （）在菜单上显示菜单和.mouseleave（）以再次隐藏它。

  $（document ）.ready（function（）{
 
 $（＃test）。mouseenter（function（）{
 $（'。tester'）。show（）; 
 }）; 
 $ b $（'。tester'）。mouseleave（function（）{
 $（this）.hide（）; 
}）; 
 
}）; 
  

编辑你的jsbin： http://jsbin.com/iroxop/1/edit

I have a simple button which displays a list on hover.

Working example

I just need to hover the list content, like a dropdown menu. How do I add script to perform that function?

HTML

<button id="test">Hover Me</button>
<ul class="tester">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4</li>
  <li>Menu 5</li>
  <li>Menu 6</li>
  <li>Menu 7</li>
  <li>Menu 8</li>
</ul>

Script

$(document).ready(function() {

    $("#test").hover(
        function () {
            $('.tester').slideDown(500);
        },
        function () {
            $('.tester').slideUp(500);   
        });
    });

解决方案

Rather than using .hover(), use .mouseenter() on the button to show the menu, and .mouseleave() on the menu to hide it again.

$(document).ready(function(){

  $("#test").mouseenter(function () {
    $('.tester').show();
  });

  $('.tester').mouseleave(function() {
    $(this).hide();
  });

});

Edit of your jsbin here: http://jsbin.com/iroxop/1/edit

这篇关于将悬停内容悬停（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！