根据按钮的状态显示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>