When hovering over the picture, I want my four components to be displayed in an animated way from top to bottom. Currently, they are displayed without any animation, making them look unappealing.
Each of the four pictures triggers the display of a corresponding component upon hover. For example, hovering over the first picture shows the first component, and so on.
<div class="EnjoyGirlsList">
/* Code for displaying different components on hover */
</div>
</div>
<div class="EnjoyGirlsHoverEffect">
/* Components that are shown based on hover events */
</div>
/* Vue.js component setup */
export default {
name: "HomePage",
components: {EnjoyRed, EnjoyYellow, EnjoyGreen, EnjoyBlue, Navbar, GirlsSectionList, FeaturedShows,},
data() {
return {
img1: false,
img2: false,
img3: false,
img4: false,
}
},
methods: {
mouseOver1: function(){
this.img1 = true
},
mouseOver2: function(){
this.img2 = true
},
mouseOver3: function(){
this.img3 = true
},
mouseOver4: function(){
this.img4 = true
},
mouseout: function() {
this.img1 = false;
this.img2 = false;
this.img3 = false;
this.img4 = false;
}
}
}