diff --git "a/\351\231\210\347\205\234/4.01\344\275\234\344\270\232/2.webp" "b/\351\231\210\347\205\234/4.01\344\275\234\344\270\232/2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..7fe6b94d82dd1bfb146b8d466bd91d202ec50ddc
Binary files /dev/null and "b/\351\231\210\347\205\234/4.01\344\275\234\344\270\232/2.webp" differ
diff --git "a/\351\231\210\347\205\234/4.01\344\275\234\344\270\232/text.html" "b/\351\231\210\347\205\234/4.01\344\275\234\344\270\232/text.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3cb1ae8aa4090ac2042fe0940604655fa64ace28
--- /dev/null
+++ "b/\351\231\210\347\205\234/4.01\344\275\234\344\270\232/text.html"
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+<style>
+    #main{
+        margin: 0 auto;
+        text-align: center;
+    }
+</style>
+<body>
+    <div style="width: 300px ;height:500px; " id="main">
+    <div><img src="./2.webp" alt="" style=" width: 300px ; height:200px; " v-on:mouseenter="fun" v-on:mouseleave="fun2"></div>
+        <button style="width: 100px ;height:40px;" v-on:mouseenter="fun" v-on:mouseleave="fun2" >点击购买</button>
+        <div v-show="isshow" style="width: 200px;height:80px; background-color:cornflowerblue;" v-on:mouseenter="fun" v-on:mouseleave="fun2" >
+        <span>名称：口罩</span><br>
+        <span>作用：防护</span><br>
+        <span>价格：50￥</span>
+        </div>
+    </div>
+    </body>
+<script>
+    let vue = new Vue({
+        el:"#main",
+        data:{
+            isshow:false,
+        },
+        methods:{
+            fun:function(){
+                this.isshow=true;
+            },
+            fun2:function(){
+                this.isshow=false;
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
