如何在 hover 上突出显示元素内的文本，而不是整个元素及其填充？ CSS/HTML

Question

我正在尝试为我的导航栏文本实现某种 hover 效果，这可能比解释的效果更好。

想要的效果：

https://i.imgur.com/sSJyeg9.png

我得到了什么：

https://i.imgur.com/fZ3z3ap.png

我的代码：

 ul { list-style-type: none; position: static; margin: 0% 30%; padding: 0; overflow: hidden; border-top: 6px double black; border-bottom: 6px double black; } li { float: left; } li a { display: block; color: black; padding: 22px 20px; text-align: center; text-decoration: none; } a.one:link { text-decoration: none; color: rgb(0, 0, 0); } a.one:visited { text-decoration: none; color: rgb(0, 0, 0) } a.one:hover { text-decoration: none; background-color: #f7c576 } a.one:active { text-decoration: none; }

 <nav> <ul> <li><a class="one" href="#">HOME</a></li> <li><a class="one" href="#">ABOUT</a></li> <li style="float: right"><a class="one" href="#">DONATE</a></li> <li style="float: right"><a class="one" href="#">MAGAZINE</a></li> </ul> </nav>

Answer 1

因为在 hover 上，您的目标a具有填充并且它是根据整个尺寸计算a ，所以很容易移动padding: 22px 20px; 在li a下并把它放在li里面。

 ul { list-style-type: none; position: static; margin: 0% 30%; padding: 0; overflow: hidden; border-top: 6px double black; border-bottom: 6px double black; } li { float: left; padding: 22px 20px; } li a { display: block; color: black; text-align: center; text-decoration: none; } a.one:link { text-decoration: none; color: rgb(0, 0, 0); } a.one:visited { text-decoration: none; color: rgb(0, 0, 0) } a.one:hover { text-decoration: none; background-color: #f7c576 } a.one:active { text-decoration: none; }

 <nav> <ul> <li><a class="one" href="#">HOME</a></li> <li><a class="one" href="#">ABOUT</a></li> <li style="float: right"><a class="one" href="#">DONATE</a></li> <li style="float: right"><a class="one" href="#">MAGAZINE</a></li> </ul> </nav>