扩大<a>的响应范围实现菜单框点击效果

核心思路

把<a>由内联元素转换成块元素，就能拥有宽高了。设置了宽高以后，再通过line-height来设置文字显示的位置。line-height和height同高就会垂直居中。想要不同的效果可以F12自己调试。

 

1、ul li a 的情况

文字使用了<a>标签，原本只有放在了文字上才会出现hover的相应特效，

但是我们想实现的效果是类似按钮，鼠标只要出现在框内就触发hover

所以加上一条

nav ul li a{

line-height: 50px;

text-decoration: none;

display: inline-block;

/*跟随父元素的高度*/

height: inherit;

}

即可。

 

2、div中的a

核心代码：

.menu2__items a{

color: rgba(51, 51, 51, 1);

font-size: 16px;

/* 把a变成块级元素*/

display: block;

width: 282px;

height: 186px;

line-height: 261px;

position: absolute;

top:0;

 

}