gpt4 book ai didi

html - 如何制作:hover only affect lettering instead of the box?

转载 作者:太空宇宙 更新时间:2023-11-03 22:51:12 25 4
gpt4 key购买 nike

我很好奇你是怎么做到的,所以你的 :hover 属性只会影响我导航栏中的单个字母,而不仅仅是悬停在框上。

* {
margin: 0px;
padding: 0px;
}
.navigation-bar {
height: 3.2em;
background: gray;
text-align: center;
border-top: 2px solid;
border-bottom: 2px solid;
}
.navigation-bar ul {
display: inline-block;
list-style-type: none;
}
.navigation-bar li {
display: inline;
}
.navigation-bar li a {
color: white;
padding: 0px 30px;
margin: 1em 0 0 -2px;
text-decoration: none;
float: left;
height: 1.2em;
line-height: 1.2em;
}
.navigation-bar li a:hover,
a:focus {
background-color: #111;
}
<!DOCTYPE html>
<link rel="stylesheet" href="navbar1.css">
<div class="navigation-bar">
<div id="navigation-container">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Gallery</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
</div>

</html>

这是我的代码示例: https://jsfiddle.net/uz081886/

现在,当鼠标悬停在一个选项卡上时,它会显示一个黑条,我该如何让它只突出显示每个单词的字母?比如当我将鼠标悬停在主页上时,文字颜色会变成黑色而不是白色,而不会出现黑条?

最佳答案

尝试改变

.navigation-bar li a:hover, 
a:focus {
background-color: #111;
}

.navigation-bar li a:hover, 
a:focus {
color: #111;
}

这是有效的,因为 background-color 以元素的填充颜色为目标,而 color 以文本的颜色为目标。

关于html - 如何制作:hover only affect lettering instead of the box?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39867081/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com