状态一: 绿色框里面显示“我是中国人”
状态二: 点击按钮,绿色框里面显示“我是外国人”,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>