怎么做:悬停只影响刻字而不是盒子?

时间:2016-10-05 06:43:54

标签: html css 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>
&#13;
&#13;
&#13;

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

现在,当鼠标悬停在标签上时,它会显示一个黑色条形图,如何制作它以便突出显示每个单词的字母?比如当我将鼠标悬停在Home上时,文字颜色会变成黑色而不是白色而没有出现黑条?

2 个答案:

答案 0 :(得分:2)

在css中将background-color属性更改为color属性。

* {
  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 {
  color: #111;
}
<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>

css中的color-color到color属性

答案 1 :(得分:1)

尝试更改

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

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

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