There are four images displayed, and when you hover over each one, different content appears. For example, hovering over the first image reveals a green block, while hovering over the second image reveals a blue block. However, the current logic in place is quite complex and difficult to follow.
If you want to see the existing logic and code for this functionality, you can check out this link. I'm curious to know if there's a way to simplify and optimize this code to make it more readable and straightforward.
<template>
<div>
<div id="girls_gallery">
<div class="girls_gallery_content">
<div>
<div class="g_gallery_title_container">
<h1>Hover Image</h1>
</div>
<div class="girls_list">
<div class="girls_container">
<img
style="width: 200px; height: 200px"
@mouseover="mouseOver1"
@mouseout="mouseout"
src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg"
alt="Snow"
/>
</div>
<div class="girls_container">
<img
style="width: 200px; height: 200px"
@mouseover="mouseOver2"
@mouseout="mouseout"
src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg"
alt="Snow"
/>
</div>
<div class="girls_container">
<img
style="width: 200px; height: 200px"
@mouseover="mouseOver3"
@mouseout="mouseout"
src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg"
alt="Snow"
/>
</div>
<div class="girls_container">
<img
style="width: 200px; height: 200px"
@mouseover="mouseOver4"
@mouseout="mouseout"
src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg"
alt="Snow"
/>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 50px">
<div
style="width: 200px; height: 200px; background: red"
v-show="img1"
key="img1"
></div>
<div
style="width: 200px; height: 200px; background: green"
v-show="img2"
key="img1"
></div>
<div
style="width: 200px; height: 200px; background: blue"
v-show="img3"
key="img1"
></div>
<div
style="width: 200px; height: 200px; background: orange"
v-show="img4"
key="img1"
></div>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
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;
},
},
};
</script>