我有一些正常的文本链接:
<a href="projects.html">Projects</a>
只有字母的中间可以点击吗？即不是P的顶部或J的底部？
a {
font-size: 50px;
background-color: yellow;
display: inline-block;
height: 25px;
}
这使得黄色的黑地面具有25px的高度，但它对可点击区域没有任何区别。所有文本仍可点击。
参见https://jsfiddle.net/m4g2b7tu/
null
a {
font-size: 50px;
background-color: yellow;
display: inline-block;
height: 25px;
}<a href="projects.html">Projects</a>null
您可以使用指针事件和一个伪元素来设置您的可点击区域:https://jsfiddle.net/psvre3t0/
null
a {
font-size: 50px;
background-color: yellow;
display: inline-block;
height: 25px;
/* update */
position:relative;
pointer-events:none;
}
a:after {
content:'';
position:absolute;
/* select area where to be layed */
width:100%;
height:50%;
left:0;
top:75%;
/*reset pointer-events */
pointer-events:auto;
/* optionnal but makes sure it is on top */
z-index:1;
/* debug , give it a background to see where it stands
background:gray;
*/
}
/* demo */
a+a:hover:after {background:#0008}<a href="projects.html">Projects</a> <a href="">Test me too</a>