Estoy tratando de crear un efecto de desplazamiento sobre las imágenes con Vue.js. Escribí el siguiente código, pero ahora, cuando paso el cursor sobre una de las imágenes, el texto aparece sobre todas las imágenes. ¿Como puedo resolver este problema? Solo quiero que aparezca el texto que pertenece a la imagen sobre la que pasé el cursor. Gracias de antemano por su ayuda.
Plantilla Vue:
<template> <div class="row partner-body-row"> <div class="col"> <div class="img-wrapper" @mouseover="showText = true" @mouseleave="showText = false" > <img class="hover-img" src="img/img-1" alt="img-1" /> <span v-if="showText">Text 1</span> </div> </div> <div class="col"> <div class="img-wrapper" @mouseover="showText = true" @mouseleave="showText = false" > <img class="hover-img" src="img/img-2" alt="img-2" /> <span v-if="showText">Text 2</span> </div> </div> <div class="col"> <div class="img-wrapper" @mouseover="showText = true" @mouseleave="showText = false" > <img class="hover-img" src="img/img-3" alt="img-3" /> <span v-if="showText">Text 3</span> </div> </div> <div class="col"> <div class="img-wrapper" @mouseover="showText = true" @mouseleave="showText = false"> <img class="hover-img" src="img/img-4" alt="img-4" /> <span v-if="showText">Text 4</span> </div> </div> </div> </template>Guion:
export default { data: () => { return { showText: false, }; }, };todas las condiciones están vinculadas a la misma variable, haga que esa variable contenga el número de cada imagen en lugar de solo verdadero/falso.
e idealmente esto debería hacerse en CSS usando :hover
<template> <div class="row partner-body-row"> <div class="col"> <div class="img-wrapper" @mouseover="showText = 1" @mouseleave="showText = 0" > <img class="hover-img" src="img/img-1" alt="img-1" /> <span v-if="showText === 1">Text 1</span> </div> </div> <div class="col"> <div class="img-wrapper" @mouseover="showText = 2" @mouseleave="showText = 0" > <img class="hover-img" src="img/img-2" alt="img-2" /> <span v-if="showText === 2">Text 2</span> </div> </div> <div class="col"> <div class="img-wrapper" @mouseover="showText = 3" @mouseleave="showText = 0" > <img class="hover-img" src="img/img-3" alt="img-3" /> <span v-if="showText === 3">Text 3</span> </div> </div> <div class="col"> <div class="img-wrapper" @mouseover="showText = 4" @mouseleave="showText = 0"> <img class="hover-img" src="img/img-4" alt="img-4" /> <span v-if="showText === 4">Text 4</span> </div> </div> </div> </template> export default { data: () => { return { showText: 0, }; }, };Simplemente podría crear un componente para cada imagen con información sobre herramientas, algo como:
Vue.config.productionTip = false; const Img = { name: 'Img', props: ['src'], data() { return { showText: false } }, template: '<div><img @mouseover="showText = true" @mouseleave="showText = false":src="src" /><span v-if="showText">Tooltip</span></div>', }; const App = new Vue({ el: '#root', components: { Img }, template: '<div><Img src="https://via.placeholder.com/150"/><Img src="https://via.placeholder.com/150"/></div>', }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="root"/>si es solo para mostrar el texto al pasar el mouse. No necesita usar v-model. en este caso usarías css.
Puede eliminar todos los v-if's <span> y agregar este css
.image-container span { display: 'none'; } .image-container:hover span { display: 'block'; }