鼠标移入后控制另外一个div的动作

我们遇到过 在一个容器里面想要操控另外的一个容器  在这里我就我个人的想法展示出来 废话不多说上代码 

js  部分

<script> 　　//<!--鼠标移入--> 　　$(function(){ 　　//获取div的top值 　　　　var divTop = $('.sidebar-hover-elem'); 　　　　var _top = $('.sidebar-hover-elem').css('top'); /　　/ console.log(_top); 　　　　$('.nav-main li').mouseenter(function(e){ 　　　　//获取当前的高度 　　　　　　var _height = $(this).css('height'); 　　　　　　var he = parseFloat(_height); 　　　　　　// console.log(he); 　　　　　　// console.log(_height); 　　　　　　$('.sidebar-hover-elem').css('height',_height); 　　　　　　var elem = $('.sidebar-hover-elem').css('height'); 　　　　　　// console.log(elem); 　　　　　　//获取当前li的下标 　　　　　　var num = $(this).index()+1; 　　　　　　// console.log(num); 　　　　　　//计算li的总高度 再加上73 设置为div的top值 　　　　　　var height = (he*num)+73-38; 　　　　　　// console.log(height); 　　　　　　$(divTop).animate({top:height},50); 　　　　} 　　) })</script>

 

主要是获取li的高度和li累加的高度来设置为外部div的top 值 去控制它的上下的动作

转载于:https://www.cnblogs.com/qinght/p/9052384.html

相关资源：鼠标移入移出改变CSS样式的小例子