Как сделать кнопку активной?

Question

[svk44]

При наведении на item появляется кнопка - все норм. Но когда вожу по кнопку не могу нажать на нее и переменная active меняется постоянно с true на false. Подскажите как сделать кнопку активной?

<template>
  <div class="item" v-on:mouseover="active = !active" v-on:mouseout="active = !active">
    <button class="delete_btn" @click="clickme" v-if="active"> 
      <div><img src="./../assets/images/Cart.svg"></div> 
    </button>  
    <div class="item_img">
        <img class="photo" src="./../assets/images/Photo.svg" alt="Изображение товара">
    </div>
    <div class="item_info">
      <div class="item_description">
        <div class="item_title"><h4>{{item_data.name}}</h4></div>
        <div class="item_desc">{{item_data.description}}</div>
        <div class="item_price">{{item_data.price}} ₽</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CatalogItem',
  data (){
    return {
      active: false,
    }
  },
  methods: {
    clickme(){
      alert('Нажата')
    }
  }
}
</script>

<style scoped>
.item{
    margin-bottom: 20px;
    width: 100%;
    height: 420px;
    background: #FFFEFB;
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.04), 0px 6px 10px rgba(0, 0, 0, 0.02);
    text-align: left;
    border-radius: 4px;
}
.delete_btn{
  position: absolute; 
  background: #FF8484;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  width: 62px;
  height: 62px;
  top: -10px;
  right: -10px;
  border: none;
}
...

Answer 1

[Вячеслав]

добавить в стили

.item:hover > button {
display:block
}

.item > button {
display:none
}

и вот эту штуку выкинуть 'v-on:mouseover="active = !active" v-on:mouseout="active = !active"'
и у кнопки - v-if="active" - тоже удалить