I'm building an application in Vuejs where I'm having a parent div and child div which on hovering show border of the element.
I implemented this with @mousehover and @mouseleave, when I hover from parent to child I need to prevent displaying border of parent div and show border of child div.
Below is my code:
<div id="app">
<div class="w-full m-20 ml-20 relative bg-indigo-200" @mouseover="toggleEdit('parent')" @mouseleave="toggleEdit()">
<div class="max-w-[200px] w-full mx-auto bg-white">
<div @mouseover.stop="toggleEdit('child')" @mouseleave.stop="toggleEdit()" class="w-full relative py-6 flex justify-center">
<img width="160" height="60" src="https://d3ag9sk63msume.cloudfront.net/project-assets/images/noetic_logo.png" alt="Logo">
<div v-show="mousechild" class="absolute top-0 left-0 w-full h-full border-2 border-blue-500">
<div class="relative w-full h-full">
<div class="absolute right-[-30px] flex flex-col">
<div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer">
<img src="/project-assets/images/email-template/icons/drag.png" width="20" height="20">
</div>
<div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer my-[1px]">
<img src="/project-assets/images/email-template/icons/delete.png" width="17" height="17">
</div>
<div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer">
<img src="/project-assets/images/email-template/icons/clone.png" width="17" height="17">
</div>
</div>
</div>
</div>
</div>
</div>
<div v-show="mouseparent" class="absolute top-0 left-0 w-full h-full border-2 border-blue-500">
<div class="relative w-full h-full">
<div class="absolute right-[-30px] flex flex-col">
<div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer">
<img src="/project-assets/images/email-template/icons/drag.png" width="20" height="20">
</div>
<div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer my-[1px]">
<img src="/project-assets/images/email-template/icons/delete.png" width="17" height="17">
</div>
<div class="h-7 w-7 bg-gray-900 flex items-center justify-center cursor-pointer">
<img src="/project-assets/images/email-template/icons/clone.png" width="17" height="17">
</div>
</div>
</div>
</div>
</div>
</div>
VueJS part:
new Vue({
el: "#app",
data() {
return {
mouseparent: false,
mousechild: false,
}
},
methods: {
toggleEdit(ele) {
console.log(ele);
if(ele === 'child') {
console.log('Event fired: Child')
this.mouseparent = false;
this.mousechild = true;
}
else if(ele === 'parent') {
console.log('Event fired: Parent')
this.mouseparent = true;
this.mousechild = false;
}
if(typeof ele === 'undefined') {
console.log('Event Fired: all close')
this.mouseparent = false;
this.mousechild = false;
}
}
}
})
You can have a look to my JSFiddle. Help me out in this.