Hover custom directive not working


#1

Hi everybody, I want to create a vue directive which accomplishes the following, when I do on hover I want the background image to scale up a bit, I do this with a custom vue directive where I apply transform scale to an image with overflow set to hidden, this creates a nice transition effect.

Hoever it’s not activating when I hover over the image, any help would be appreciated!

This is my code:

<template>
<section class="posts2_maincontainer">
    <div class="posts2_big_container">
        <main-slider :slidercount="3" :sliderinterval="5000" :slideritems="slideritems"></main-slider>
        <a class="posts2_image_container" href="/clases">
            <div class="posts2_image" style="background-image:url('/img/photos/dogs19.jpg');"></div>
            <span class="posts2_text">CLASES A DOMICILIO</span>
        </a>
        <a class="posts2_image_container" href="/conducta-canina">
            <div class="posts2_image" style="background-image:url('/img/photos/dogs20.jpg');"></div>
            <span class="posts2_text">CLASES EN GRUPO</span>
        </a>
    </div>
    <a class="posts2_small_container" href="/formate-con-nosotros" style="outline:1px solid red;">
        <div class="posts2_image" v-on-hover-zoom style="background-image:url('img/photos/dogs14.jpg'); background-position-x:55%;"></div>
        <span class="posts2_text">FORMATE CON NOSOTROS</span>
    </a>
</section>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapActions } from 'vuex';
export default{
name: 'PostsHub2',

computed: {
	
},

props: {
    slideritems: { required:true }
},

mounted () {
    console.log(this.$options.name+' component successfully mounted');
},

methods:{
	 
}

}
</script>
<!--STYLES-->
<style scoped>
.posts2_maincontainer{width:100%; height:600px; display:flex; justify-content:space-between;}
.posts2_big_container{width:66%; height:100%; display:flex; justify-content:space-between; position:relative;}
.posts2_small_container{width:33%; height:100%; position:relative; box-shadow:2px 2px 4px rgba(0,0,0,0.3); overflow:hidden; }
.posts2_image_container{width:49%; height:42%; margin-top:auto; position:relative; box-shadow:2px 2px 4px rgba(0,0,0,0.3);}
.posts2_image{width:100%; height:100%; background-size:cover; background-position:center;}
.posts2_text{width:100%; height:50px; position:absolute; bottom:25px; left:0px; display:flex; justify-content:center; align-items:center; color:white; font-size:25px; background-color:rgba(0,0,0,0.7);}
</style>


My vue directive:

Vue.directive('on-hover-zoom', {
    isLiteral: true,
    inserted: (el, binding, vnode) => {
        let f = () => {
            el.style.transform = 'scale(1.5, 1.5)';
            console.log('hovered');
        }

        el.addEventListener('hover', f);
    }
});

#2

Well, I do believe your problem is there is no hover event. You need to use a mouse event such as mouseover