I am building a calculator to help practice learning Vue.js 3 (I am new to vue). I have got the basic functionalities down but I am trying to figure out how to add a hover animation over the buttons. If possible I am trying to make a different hover color between the buttons in white and buttons in orange. Any help would be appreciated

Code:

  <div >
  <div >{{ current || '0'}}</div>
  <div @click="clear" >C</div>
  <div @click="sign" > /-</div>
  <div @click="percent" >%</div>
  <div @click="divide" >÷</div>
  <div @click="append('7')" >7</div>
  <div @click="append('8')" >8</div>
  <div @click="append('9')" >9</div>
  <div @click="multiply" >x</div>
  <div @click="append('4')" >4</div>
  <div @click="append('5')" >5</div>
  <div @click="append('6')" >6</div>
  <div @click="minus" >-</div>
  <div @click="append('1')" >1</div>
  <div @click="append('2')" >2</div>
  <div @click="append('3')" >3</div>
  <div @click="plus" > </div>
  <div @click="append('0')" >0</div>
  <div @click="dot" >.</div>
  <div @click="equal" >=</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previous: null,
      current: '',
      operator: null,
      operatorClicked: false,
      hover: false
    }
  },

  methods: {
    clear() {
      this.current = '';
    },

    sign() {
      this.current = this.current.charAt(0) === '-' ?
      this.current.slice(1) : `-${this.current}`;
    },

    percent() {
      this.current = `${parseFloat(this.current) / 100}`;
    },

    append(number) {
      if (this.operatorClicked) {
        this.current = '';
        this.operatorClicked = false;
      }
      this.current = `${this.current}${number}`;
    },

    dot() {
      if (this.current.indexOf('.') === -1) {
      this.append('.')
      }
    },

    setPrevious() {
      this.previous = this.current;
      this.operatorClicked = true;
    },

    plus() {
      this.operator = (a,b) => a   b;
      this.setPrevious();
    },

     minus() {
      this.operator = (a,b) => a - b;
      this.setPrevious();
    },

     multiply() {
      this.operator = (a,b) => a * b;
      this.setPrevious();
    },

     divide() {
      this.operator = (a,b) => a / b;
      this.setPrevious();
    },

     equal() {
      this.current = `${this.operator(
      parseFloat(this.current),
      parseFloat(this.previous)
      )}`;  
      this.previous = null;
    }
  }
}
</script>

<style scoped>
.calculator {
  margin: 0 auto;
  width: 400px;
  font-size: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(50px, auto);
}

.display {
  grid-column: 1 / 5;
  background-color: black;
  color: white;
}

.zero {
  grid-column: 1 / 3;
  border: 1px solid black;
}

.btn {
  background-color: white;
  border: 1px solid black;
}

.operator {
  background-color: orange;
  color: white;
  border: 1px solid black;
}
</style>

CodePudding user response：

You can use the :hover selector pseudo class, no need to involve js/vue for that

ie:

.btn:hover {
  background-color: peach;
}
.operator:hover {
  background-color: lavender;
}

CodePudding user response：

Yes, just with hover on btns you can achieve this

.btn:hover {
   background-color: #cac8c3;
 }
.operator:hover {
   background-color: #6f4d00;
 }

Exmaple in this codepen https://codepen.io/JavierSR/pen/LYQdjwY