new Vue({
el: '#mouse',
data: {
message: 'Hover Me!'
},
methods: {
mouseover: function(){
this.message = 'Good!'
},
mouseleave: function(){
this.message = 'Hover Me!'
}
}
})body {
background: #333;
#mouse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 280px;
height: 100px;
margin: 0 auto;
line-height: 50px;
text-align: center;
color: #fff;
background: #007db9;
a {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
}
}<div id="mouse">
<a
v-on:mouseover="mouseover"
v-on:mouseleave="mouseleave">
{{message}}
</a>
</div>How can I change the content of a div card on hover in Vue.js?
Using the code provided above, I have successfully managed to change the content on hover. However, my only issue is that initially, I want to display an image and then show a button within the same div after the user hovers over it.