如何解决伪元素块链接问题
我使用 :before
伪元素为导航链接创建了底部边框悬停动画:
a {
display: inline-block;
padding: 20px 0px;
margin: 0px 10px;
position: relative;
font-weight: bold;
font-family: Montserrat;
cursor: pointer;
background-color: #f5f5f5;
}
a:before {
content: '';
position: absolute;
width: 100%;
height: 0px;
border-bottom: 2px solid black;
bottom: 12px;
transform-origin: bottom left;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform: 0.2s ease-out;
}
a:hover:before {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
上面的可运行代码没有这个问题,但在我的网站上,伪元素的 2 px 粗边框阻止了菜单链接并将光标更改为默认箭头。如果用户误点击底部边框,菜单链接将不起作用,这会造成混乱。每次将鼠标悬停在边框上时,光标都会快速变化,这让导航菜单看起来有问题。
这是一个屏幕录像:https://streamable.com/gk9yir
我该如何解决这个问题?
解决方法
忽略伪元素处的指针
a:before {pointer-events:none;...
,
改用 box-shadow:
a {
display: inline-block;
padding: 20px 0px;
margin: 0px 10px;
position: relative;
font-weight: bold;
font-family: Montserrat;
cursor: pointer;
background-color: #f5f5f5;
}
a:before {
content: '';
position: absolute;
margin-left:1px;
width: calc(100% - 2px);
height: 0px;
box-shadow:0 0 0 1px #000;
bottom: 12px;
transform-origin: bottom left;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform: 0.2s ease-out;
}
a:hover:before {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
这应该会修复它,因为阴影不会占据鼠标焦点。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。