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 class="calculator"> <div class="display">{{ current || '0'}}</div> <div @click="clear" class="btn">C</div> <div @click="sign" class="btn">+/-</div> <div @click="percent" class="btn">%</div> <div @click="divide" class="operator">รท</div> <div @click="append('7')" class="btn">7</div> <div @click="append('8')" class="btn">8</div> <div @click="append('9')" class="btn">9</div> <div @click="multiply" class="operator">x</div> <div @click="append('4')" class="btn">4</div> <div @click="append('5')" class="btn">5</div> <div @click="append('6')" class="btn">6</div> <div @click="minus" class="operator">-</div> <div @click="append('1')" class="btn">1</div> <div @click="append('2')" class="btn">2</div> <div @click="append('3')" class="btn">3</div> <div @click="plus" class="operator">+</div> <div @click="append('0')" class="zero">0</div> <div @click="dot" class="btn">.</div> <div @click="equal" class="operator">=</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>
Advertisement
Answer
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; }