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

标签 html css hover

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

相关文章:

html - webkit透视变换切穿另一个div

html - 如何通过 css 添加图像叠加层?

html - 大图像上的小图像悬停 css

css - Bootstrap 3 - 响应式登录对话框

html - 3 div的中间div占用剩余宽度

javascript - 试图捕获在 jQuery 中选择了哪个按钮

css - 我的原始按钮不会显示,但我的悬停会显示吗?

javascript - 单击内部时如何防止下拉菜单关闭?

javascript - 它如何用 highcharts 实现这个图表?

html - iPhone CSS 视口(viewport)问题 - 网站 "wobbles"左/右