vue 多级菜单栏，鼠标移入显示鼠标移除隐藏

最新推荐文章于 2024-04-25 15:57:52 发布

yhd1998

最新推荐文章于 2024-04-25 15:57:52 发布

阅读量2.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/yhd1998/article/details/109028197

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       <style type="text/css">
           .y2{
               width: 240px;
               height: 120px;
               background-color: #00FFFF;

           }
           .y3{
               width: 660px;
               position: relative;
           }
           .y4{
                   position: absolute;
               width: 282px;
               background: greenyellow;
                   height: 200px;
                   top: -120px;
                   right: 130px;
           }
           .y1{
               width: 948px;
               height: 160px;
               margin: 0 auto;
           }
           .y5{
               width: 948px;
               height: 160px;
               margin: 0 auto;
               margin-top: -47px;
           }

       </style>
   </head>
   <body>
       <div id="app">
           <div @mouseover="mouseover" @mouseleave="mouseleave" class="y1">
               <div class="y2">
                   <p>1</p>
               </div>
               <div class="y3" v-show="yc">
                   <div class="y4">
                       1
                   </div>
               </div>
           </div>
           <div @mouseover="mouseover1" @mouseleave="mouseleave1" class="y5">
               <div class="y2">
                   <p>2</p>
               </div>
               <div class="y3" v-show="wc">
                   <div class="y4">
                       2
                   </div>
               </div>
           </div>
       </div>

   </body>
   <script type="text/javascript">
       var app = new Vue({
           el:"#app",
           data:{
           yc:false,
           wc:false
           },
           methods:{
               mouseover(){
                   this.yc = true
               },
               mouseleave(){
                   this.yc = false
               },
               mouseover1(){
                   this.wc = true
               },
               mouseleave1(){
                   this.wc = false
               }
           }
       })
   </script>
</html>