js 实例1 实现购物车鼠标移动显示功能框;
实现效果如下;
思路:个人思路是两个小盒子(box1,box2)放在一个大盒子内。
重点是如何实现两个盒子的区分,在鼠标上移到box1的时候,box1下边框能够隐藏。
通过实现z-index的大小,来决定box1有一部分是遮盖box2的,这样通过js鼠标移动事件 来将box1的border-bottom=0;
具体实现过程:
这种做法是实现box2 不和box1属于一个父盒子,和box1父盒子属于同一父盒子,通过绝对定位来实现。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .w{ width: 990px; height:200px; margin:0 auto; background-color:rgb(240,243,239); overflow: hidden; } .inp{ float: left; font-size: 0; } .inp1{ float: left; width: 200px; height: 40px; } .inp2{ width: 60px; height: 45px; border: 0; background: red url("images/search.png") no-repeat center; cursor: pointer; } .shopcar{ float: left; margin-left: 30px; overflow: hidden; } .block1{ width: 190px; height:50px; line-height: 50px; background: white url("images/gwc1.png") no-repeat 20px; background-size: 16px 16px; text-align: center; cursor: pointer; border: 1px solid red; position: absolute; z-index: 999999; } .block1 a{ text-decoration: none; color: red; } .block1 span{ font-size: 5px; color: red; } .none1{ display: none; width: 300px; height: 100px; background-color:white; position: relative; border: 1px solid red; left:184px; top:50px; } div.c{ border-bottom: 0; } </style> </head> <body> <div class="w"> <div class="inp" id="inp"> <from > <input type="text" class="inp1"> <input type="submit" class="inp2" value=""> </from> </div> <div class="shopcar"> <div class="block1" id="block1"> <a href="">我的购物车</a> <span>(0)</span> </div> </div> <div class="none1" id="none1"> </div> </div> <script type="text/javascript"> window.onload=function () { function $(id) { return document.getElementById(id) } $('block1').onmousemove=function () { $('none1').style.display='block'; // $('block1').style.borderBottomWidth = '0' $('block1').className +=' c'; } $('block1').onmouseout=function () { $('none1').style.display='none' $('block1').removeAttribute('class'); $('block1').className = 'block1'; } } </script> </body> </html>
其他方法。
box1,box2属于同一个父盒子,父相子绝。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 500px; height: 90px; margin: 100px auto; background-color: rgba(0,0,0,0.2); position: relative; } .car{ width: 150px; height: 30px; background-color: #fff; position: absolute; left: 200px; top: 3px; z-index: 9; border: 1px solid green; } .shop{ width: 310px; height: 70px; background-color: #fff; position: absolute; top:33px; left: 40px; border: 1px solid green; display: none; } div.c{ border-bottom-width: 0; } div.t{ border: 1px solid green; } </style> </head> <body> <div class="box"> <div class="car" id="myCar">我的购物车</div> <div class="shop t" id="shop"></div> </div> <script type="text/javascript"> var myCar = document.getElementById('myCar'); var shop = document.getElementById('shop'); // 事件 event 冒泡 捕获 // onchange oninput事件 检测输入框用户输入 onmouseenter onmouseleave 事件对象 event myCar.onmouseenter = function(e){ // 阻止默认事件 a标签的默认事件 // e.preventDefault() // 阻止冒泡 // e.stopPropagation(); shop.style.display = 'block'; myCar.className += ' c'; } myCar.onmouseleave = function(){ shop.style.display = 'none'; // myCar.className.replace(myCar.className,'car'); myCar.removeAttribute('class'); myCar.className = 'car'; } myCar.parentNode.onmouseenter = function(){ // alert(1111); console.log(111); } myCar.parentNode.parentNode.onmouseenter = function(){ // alert(222); console.log(222); } </script> </body> </html>