模拟select，鼠标从点击区域到显示区域完美过渡

来源：互联网发布：ipad打谱软件编辑：程序博客网时间：2024/06/02 06:58

例如小米官网的导航栏，鼠标hover的时候显示内容，那么从导航栏到显示的内容区域，鼠标如何完美过渡？

下面是我自己的方法，直接上代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>二级菜单</title><style>.box{width: 400px;height: 600px;margin: 100px auto 0;}.sele{height: 100px;position: relative;cursor: pointer;}h1{line-height: 100px;font-size: 36px;text-align: center;background-color: #CE4DCF;}.cont{width: 400px;height: 400px;background-color: orange;position: absolute;left: 0;top: 100px;display: none;}</style><script src="jquery.min.js"></script><script src="menu.js"></script></head><body><div class="box"><div class="sele"><h1>点我试试</h1><div class="cont"></div></div></div><script>$(function(){/*select模拟：clickClass:点击对象的class名称contClass:点击后要展现的内容的class名称*/function selectT(clickClass,contClass){var n = 0; /*定义n，来控制内容的展开与隐藏*/$(clickClass).click(function(){$(contClass).slideDown(200);});function nOn(){n = 1;};function nOff(){n = 0;setTimeout(function(){if(n == 0){$(contClass).slideUp(200);};},300);};$(clickClass).hover(function(){nOn()},function(){nOff()});$(contClass).hover(function(){nOn()},function(){nOff()});};selectT('h1','.cont');})</script></body></html>

0 0