如何解决如何在悬停时突出显示元素内的文本,而不是整个元素及其填充? CSS/HTML
我正在尝试为我的导航栏文本实现某种悬停效果,这可能比解释的更好。
想要的效果:
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);
}
a.one:visited {
text-decoration: none;
color: rgb(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>
解决方法
因为在悬停时,您的目标是 a
,它具有填充并且它是从 a
整个大小计算的,因此可以轻松地将 padding: 22px 20px;
移动到 li a
下并将其放入 { {1}}。
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);
}
a.one:visited {
text-decoration: none;
color: rgb(0,0)
}
a.one:hover {
text-decoration: none;
background-color: #f7c576
}
a.one:active {
text-decoration: none;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。