狀態一： 綠色框里面顯示“我是中國人”

狀態二： 點擊按鈕，綠色框里面顯示“我是外國人”，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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。