使用Vue
@mouseenter 鼠标移入事件
@mouseout鼠标移出事件
实现导航栏鼠标移入移出效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><script src="../public/vue.min.js"></script><style>ul li{width: 80px;background-color: red;color: white;list-style: none;}ul li:hover{background-color: white;color: red;}.d1{width: 400px;height: 400px;background-color: green;position: fixed;left: 126px;top: 16px;display: none;}.d2{display: block;}</style><body><div id="app"><ul><li v-for="item in array" @mouseover="item.active = item.active?false:true" @mouseout="item.active=item.active?false:true">{{item.titleName}}<div :class="{d1:true,d2:item.active}"><div v-for="arr in item.names"><h2>{{arr.name}}</h2><h3>{{arr.smallName}}</h3></div></div></li></ul></div><script>new Vue({el:"#app",data:{array:[{active:false,titleName: "美容美妆",names: [{name: "护肤",smallName: ["洁面", "口红"]}],},{active:false,titleName: "儿童用品",names: [{name: "奶粉",smallName: ["锦纶", "科迪"]}],},{active:false,titleName: "家居",names: [{name: "扫把",smallName: ["三星", "华为"]}],},]}})</script></body></html>
