vue 点击,鼠标移动上去显示隐藏

1,鼠标点击显示隐藏,样式可以自己调,我就写个dome。

 <div class="min">
      <button @click="change">点击我</button>
      <div v-show="show">
        显示隐藏的内容
      </div>
    </div>
<script>
export default {
  name: "testresult",
  data() {
    return {
      show: false
    };
  },
  methods: {
    change() {
      this.show = !this.show;
    }
  }
};
</script>

鼠标移动上去事件:

html:

  <div class="min">
      <button
        class="cancelbtn"
        @mouseover="mouseover(n)"
        @mouseleave="mouseleave"
        v-show="isshow & (n == id)"
      >
        取消</button
      ><br />
      <button
        class="followbtn"
        @mouseover="mouseover(n)"
        @mouseleave="mouseleave"
      >
        关注
      </button>
    </div>

js

<script>
export default {
  name: "testresult",
  data() {
    return {
      isshow: false,
      id: 0
    };
  },
  methods: {
    // 移入
    mouseover(id) {
      this.id = id;
      clearTimeout(this.timer);
      this.isshow = true;
    },
    // 移出
    mouseleave() {
      this.timer = setTimeout(() => {
        this.isshow = false;
      }, 100);
    }
  }
};
</script>

css:

.followbtn {
  width: 50px;
  height: 30px;
  text-align: center;
  background-color: coral;
  color: #ffffff;
  border: 0;
}
.cancelbtn {
  width: 50px;
  height: 30px;
  text-align: center;
  background-color: brown;
  color: #ffffff;
  border: 0;
}

效果图:

   

原文地址:https://www.cnblogs.com/lovebear123/p/12069245.html

时间: 2024-10-03 22:16:08

vue 点击,鼠标移动上去显示隐藏的相关文章

css 鼠标滑过显示隐藏内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

js鼠标滑动图片显示隐藏效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8国际编码--> <meta http-equi

vue点击菜单以外区域,隐藏菜单操作

data() { return { menuShow: false //v-show标识隐藏显示 } }, mounted (){ let _this = this; document.addEventListener('click', function (e) { let flag = e.target.contains(document.getElementsByClassName('menu-class')[0]); console.log(flag); if(!flag) return;

BootStrap 模态框禁用空白处点击关闭,手动显示隐藏,垂直居中

$('#ajax_wait').modal({ backdrop: 'static', keyboard: false }); backdrop:static ,空白处不关闭. keyboard:false ,esc键盘不关闭. 上述代码同时打开模态框 当然,直接在模态框上加上data-backdrop="static"也可以. -------------------------------------------------------------------------------

css实现 鼠标移上放大效果 或 显示隐藏内容 简单原型

适当调整即可变为图片放大镜效果,或者鼠标移上去显示隐藏内容(ie6对hover支持不够完善,推荐在火狐或谷歌中观看). 效果如图: css: .demo {        width: 318px;        margin: 100px auto 0 auto;    } .demo:after {        content: "";        display: block;        height: 0;        clear: both;    } .demo

1.鼠标点击换样式+2.下拉菜单缓慢显示/隐藏样式效果

1.鼠标点击换样式 <style type="text/css"> .aa{ width:90px; height:60px;text-align:center; vertical-align:middle; line-height:60px; margin-right:10px; font-size:19px; float:left; background-color:#06F} </style> <body> <div style=&quo

vue实现点击按钮,内容部分显示隐藏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue点击切换样式,点击切换地址栏,点击显示或者隐藏

1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 ‘{“span”:index==0}’ 意思就是判断等于 index等于0的时候就显示span的样式  2.点击切换地址栏 conten.vue top.vue left.vue 效果 原文地址:https://www.cnblogs.com/yunhubuxi/p/11965689.html

鼠标滑过时显示图片内容隐藏和鼠标滑过图片隐藏内容显示的两种小方法

1.鼠标滑过时显示图片,内容隐藏,下面以一个小日历的做法展示 <div class="date7"> <a href=""><div class="date7a"><span class="abcabc">30</span></div></a> <a href=""><div class="dat