根据按钮的状态显示hover

状态一： 绿色框里面显示“我是中国人”

状态二： 点击按钮，绿色框里面显示“我是外国人”，hover的时候显示“取消hover效果”

状态三： “取消hover效果”，会取消，在我是外国人上面的hover效果

源代码：

这里我使用了vue的方式，有需要的可以参阅


<template><div class="dynamic"><div :class="[hover ? Ingin : '',Ingout ]"><div>{{message}}</div><div class="cancal-matching"v-if="hover"@click="cancelHover"><div class="cancal-matching-body"><div>取消hover效果</div></div></div></div><div @click="changeMes"class="btn">点击</div></div>
</template><script>
export default {name: 'Hover',props: {},data () {return {message: '我是一个中国人！',Ingin: 'cancle-match',Ingout: 'message',hover: false}},methods: {changeMes () {if (this.message === '我是一个中国人！') {this.message = '你是外国人！'this.hover = true} else {this.message = '我是一个中国人！'this.hover = false}},cancelHover () {this.hover = false}}}
</script><style lang="less">
.dynamic {margin-top: 30%;
}
.message {width: 130px;height: 100px;line-height: 100px;background: green;margin: 0 auto;text-align: center;color: #fff;cursor: pointer;
}
.btn {width: 100px;height: 50px;line-height: 50px;background: blue;margin: 0 auto;text-align: center;color: #fff;cursor: pointer;border-radius: 6px;margin-top: 20px;
}.cancle-match {position: relative;&:hover {.cancal-matching {.cancal-matching-body {display: block;}}}
}.cancal-matching {position: relative;display: flex;justify-content: center;.cancal-matching-body {justify-content: space-around;align-items: center;width: 130px;height: 100px;background-image: linear-gradient(180deg, #a20707 0%, #cd1313 100%),linear-gradient(#9f0606, #f01e1e);border-radius: 4px;cursor: pointer;color: #fff;display: none;position: absolute;left: 0;top: -100px;z-index: 2;}
}
</style>

根据按钮的状态显示hover相关推荐

解决 vue-paypal-checkout 导致 PayPal 按钮未正常显示
问题 No handler found for post message: zoid_init from https://www.sandbox.paypal.com in http://localh ...
计算机与打印机脱机后怎么共享,我电脑是共享打印机,现在状态显示脱机该怎么办...
公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解. 话题:我电脑是共享打印机,现在状态显示脱机该怎么办?打印机回答:打印器有问题了呗. 参考回答:潭陋纠跳授鳖 /朋友圈里面现在都在用这款.不 ...
智能设备 - ESP32-CAM上网、拍照、上传图片与状态显示
智能设备 - ESP32-CAM 目录智能设备 - ESP32-CAM 设备状态 ESP32-CAM 上网 ESP32-CAM 拍照 ESP32-CAM 上传图片本项目的智能装备采用 ESP32- ...
iOS 11开发教程（二十）iOS11应用视图美化按钮之设置按钮的状态
iOS 11开发教程(二十)iOS11应用视图美化按钮之设置按钮的状态在示例2-2中,设置按钮的标题和颜色时,需要对按钮的状态进行设置,表示按钮在某一状态下的标题和标题颜色是什么样子.例如,UICo ...
android字体显示不全,android 按钮的文字显示不全
android 按钮的文字显示不全发布时间:2020-06-19 03:42:34 来源:51CTO 阅读:1424 作者:FergusJ AbsoluteLayout.LayoutParams l ...
用动画切换按钮的状态
用动画切换按钮的状态效果源码 https://github.com/YouXianMing/UI-Component-Collection // // BaseControl.h // BaseB ...
ESP32 + ESP-IDF ｜GPIO 03 - 定时器轮询按钮的状态，控制LED亮或者灭
一.前言前面两个章节使用了GPIO的输出功能,本章节介绍如何使用ESP32上GPIO的输入功能. 通过一个简单的实验来学习这个功能: 1.开启一个定时器(上一章节学习了),定时器以每100ms的周期 ...
layui select日期_layui给下拉框、按钮状态、时间赋初始值的方法，按钮的状态
layui给下拉框.按钮状态.时间赋初始值的方法,按钮的状态如下所示: 编辑 layui.use('table', function() { var table = layui.table; //监 ...
Button按钮多行显示的实现方法
一.VB中Button按钮多行显示的实现方法先在记事本等文本文件中写上两行或多行文字,然后复制到Button按钮的Caption属性中即可. 二.C#中Button按钮多行显示的实现方法使用上面的 ...

根据按钮的状态显示hover

根据按钮的状态显示hover相关推荐

最新文章

热门文章