我很好奇你是怎么做到的,所以你的 :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/