一，通过原生JavaScript实现

      原理：利用onMouseOver 和 onMouseOut 事件来触发一个自定义的 change() 函数，实现了鼠标悬停时显示下拉菜单，鼠标移出时隐藏下拉菜单的效果。

html部分代码

</ul>
			<ul class="right">
			  <li class="list" onMouseOver="change('list_cur','block')" onMouseOut="change('list_cur','none')">
				  <span>个人中心</span>
				  <div id="list_cur">
				     <a href="#">已完成订单</a>
					  <a href="#">未完成订单</a>
					  <a href="#">我的保险</a>
					  <a href="#">账号安全</a>
					  <a href="#">个人信息</a>
					  <a href="#">常用联系人</a>
				  </div>
				</li>
				    <li class="line">|</li>
			    <li><span>使用须知</span></li>
				    <li class="line">|</li>
				<li><span>收藏夹</span></li>
					<li class="line">|</li>
				<li><span>货物快运</span></li>
					<li class="line">|</li>
				<li><span>联系我们</span></li>
			</ul>

      onMouseOver 和 onMouseOut 事件所含不同参数决定了他们各自实现的效果不同

     第一个参数作为选择器，在函数中选中对应元素

     第二个参数作为display属性值，配合选择语句来决定何时显示，何时隐藏下拉菜单

完整js代码

function change(myid,mode){
	document.getElementById(myid).style.display=mode;//修改id=“myid”的元素的display属性为mode，即list_cur对应的总下拉菜单框架的display属性值，后续css代码有说明
	if(mode=='block'){//显示下拉菜单
		//设置下拉菜单所在的边框
		document.getElementById(myid).style.border="1px solid #eee";
		document.getElementById(myid).style.borderTop="none";
		//设置鼠标滑过的li的边框及背景颜色
		document.getElementById(myid).parentNode.style.backgroundColor="#fff";//修改父节点的css样式
		document.getElementById(myid).parentNode.style.border="1px solid #eee";
		document.getElementById(myid).parentNode.style.borderBottom="none";
	}
	else{
		//当不显示下拉列表时，鼠标滑过的li的边框及背景颜色
		document.getElementById(myid).parentNode.style.backgroundColor="";
		document.getElementById(myid).parentNode.style.border="";
	}	
}

css部分代码

.right li{
	cursor: pointer;
	border: 1px solid #f7f7f7;
}
.right li span{padding: 0px 9px;}
.right .list{position: relative;}
.right #list_cur{
	width: 80px;
	position: absolute;
	display: none;                   /*原本的下拉菜单元素被隐藏，通过style.display方法改变display为block，使其显示*/      
	left: -1px;
	top: 30px;
	background-color: #FFFFFF;
	border: 1px solid #EEE;
}
.right #list_cur a{
	display: block;                  /*因为a标签元素是行内元素，改变display值使其能向下排列显示*/
	padding: 10px;
	line-height: 28px;
	color: #6C6C6C;
}
.right #list_cur a:hover{
	background: #f5f5f5;
}

部分样图

Jquery 背景鼠标特效动画_Jquery 背景鼠标特效动画

  

Jquery 背景鼠标特效动画_css_02

 

二，利用jQuery技术实现下拉菜单

方法一

         原理：通过初始hide()和toggle()方法设置下拉菜单div的样式是否可见

html部分代码

<div class="_002">
                <div id="sanjiao1"><img src="image/iconClose.jpg"></div>
                  <span id="_get">我的设备</span>
          </div>
             <div class="list" >
              <a href="#">01</a>
              <a href="#">02</a>
              <a href="#">03</a>
              <a href="#">04</a>
              <a href="#">05</a>
          </div>

css部分代码

.list a{                                         /*链接标记样式，因为<a>标记是行内元素，所以要转换为块元素以换行*/   
        display: block;
	    padding: 10px;
	    line-height: 28px;
	    color: #6C6C6C;
      }

js部分代码

$(function(){
           $(".list").hide();                                       //初始化隐藏下拉菜单的样式
            $("#_get").click(function(){                          //通过一个单击事件，使用toggle()设置下拉菜单div的样式是否可见
              $(".list").toggle();    
    });

部分样图

Jquery 背景鼠标特效动画_html_03

Jquery 背景鼠标特效动画_Jquery 背景鼠标特效动画_04

 

方法二

  原理：通过 slideToggle()方法 实现下拉菜单的下滑与收起

相关代码

<!DOCTYPE html>
<html>
<head>
  <title>好友列表</title>
  <style>
    .device {
      cursor: pointer;
    }

    .contacts {
      display: none;
    }
  </style>
  <script src="jQuery.js"></script>
  <script>
    $(document).ready(function() {
      // 监听我的设备的点击事件
      $('.device').on('click', function() {
        // 切换联系人的显示状态
        $('.contacts').slideToggle();                 //菜单是滑下或收起的，而不是突然隐藏或出现
      });
    });
  </script>
</head>
<body>
  <div class="device">我的设备</div>
  <ul class="contacts">
    <li>联系人1</li>
    <li>联系人2</li>
    <li>联系人3</li>
  </ul>

  <!-- 其他模块 -->
  <div>其他模块</div>

</body>
</html>

部分样图

Jquery 背景鼠标特效动画_Jquery 背景鼠标特效动画_05

 

Jquery 背景鼠标特效动画_Jquery 背景鼠标特效动画_06

       我是小p，希望与大家分享更多的前端开发的知识，如果你有不同或更好的见解，欢迎在我的评论区留言！