当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to make :hover only affect lettering instead of the box?

问题描述:

I'm curious to how you make it so your :hover property will only affect the individual letters in my navigation bar instead of just hovering over the the box.

* {

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>

网友答案:

Try changing

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

to

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

This works because background-color targets the fill color of the element while color targets the color of the text.

网友答案:

change background-color property to color property in css.

* {
  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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: