类似携程顶部标签栏hover效果

效果1

效果2

在官网上很多类似这种的效果，使用也相对广泛，半年前我曾实现过类似的效果，当时的实现思路主要是下拉框是共用一个，然后每次都根据顶部hover的a标签，然后动态的更新弹出框的内容；我记得当时遇到了一些问题，就是弹出框先收回，然后再弹出等，同时操作起来逻辑相对复杂、混乱，这次我重新实现了一下类似的效果，感觉逻辑和思路更合理一些，记录一下！！！

代码难点(注意点)

1. 鼠标进入和离开视图的事件要选择 mouseenter 和 mouseleave
   选择说明：
   (1)mouseenter 只会在进入该视图的时候调用一次，同时不会因为经过子元素的时候而调用，这就是不使用mouseover的原因；
   (2)mouseleave 只会在鼠标离开视图的时候调用一次，而不会因为经过或者离开子视图的时候都调用，这也是不选择 mouseout 的原因。
2. 底部弹出的下拉框和顶部的a标签同属于一个li标签的子元素，只不过默认样式都是隐藏的，只不过是通过鼠标的事件来控制它的显示和隐藏。
3. 因为弹出框都是属于 li 的子元素，所以左边的对齐是和 a标签对齐，所以我使用了定位，然后根据 li 的位置 向左偏移

:style="{left: ((item.id - 1) * - 52 + 'px')}"

代码

此处主要是vue的一个组件的方式实现的
html

js

style