从父母到子女效应的鼠标
我正在用vuejs构建一个应用程序，其中我有一个父母div和子div，该div和子div在该元素的悬停显示边框上。
我用@MouseHover和@mouseleave实现了此功能，当我徘徊在父母到子女时，我需要防止显示父母div的边界并显示儿童div的边框。
以下是我的代码：
<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部分：
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;
}
}
}
})
您可以查看我的 jsfiddle 。在这方面帮助我。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的第二个 big div
v-show悬停在parent> parent时，在您的child上方您的事件：快速修复可能是交换这两个 div 的外观，以便孩子始终保持在顶部，即使盒子正在显示在父母徘徊中：
tip ：我会使用MouseOver/MouseEnter/MouseElenter/MouseElenter/MouseElenter/mouseEleave or MouseElenter/MouseEleave ，但这是我的偏爱
Your second big div which
v-showupon hovering theparentis above yourchildand is eating your events:A quick fix could be to swap the appearance of these two div, so that the child always stays on top, even if the box is showing on parent hover:
Tip: I would use mouseover/mouseout or mouseenter/mouseleave, but this is my preference