Question

我想设置菜单栏的颜色样式。如果li是＆＃34;活跃的＆＃34;那么文字颜色和边框颜色应该是蓝色，否则一切都是灰色的。在悬停时，灰色应该变为蓝色。

我试过但它没有用。这是我的代码：

＆＃13;

@import 'https://fonts.googleapis.com/css?family=Fjalla+One';
 ul.dnav {
  list-style-type: none;
  margin-left: 0px;
  margin-right: 0px;
  overflow: hidden;
  width: 400px;
  -webkit-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
  -moz-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
  box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
}
li.dnav {
  font-size: 20px;
  background-color: #FFF;
  width: 100px;
  float: left;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 0px;
  border-style: solid;
  border-color: grey;
  border-bottom-width: 5px;
  border-left-width: 0px;
  border-top-width: 0px;
  border-right-width: 0px;
}
li.dnav a {
  color: grey;
  font-family: 'Fjalla One', sans-serif;
  display: block;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}
li.dnav a:hover {
  background-color: #fff;
  opacity: 1;
  overflow: hidden;
  color: rgba(0, 130, 255, 1);
  border-color: rgba(0, 130, 255, 1);
}
a:active {
  background-color: #fff;
  opacity: 1;
  overflow: hidden;
  color: rgba(0, 130, 255, 1);
}
li.dnav-active {
  border-color: rgba(0, 130, 255, 1);
  border-bottom-width: 5px;
  border-left-width: 0px;
  border-top-width: 0px;
  border-right-width: 0px;
  color: rgba(0, 130, 255, 1);
}

＆＃13;

<header>
  <ul class="dnav">
    <li class="dnav dnav-active"><a class="active" href="#">Home</a>
    </li>
    <li class="dnav"><a href="#">ser</a>
    </li>
    <li class="dnav"><a href="#">con</a>
    </li>
  </ul>
</header>

＆＃13;

Answer 1

您只为包含的a标记设置悬停规则。我在下面的代码段中为li元素添加了一个单独的规则：

li.dnav:hover {
  border-color: rgba(0, 130, 255, 1);
}

＆＃13;

@import 'https://fonts.googleapis.com/css?family=Fjalla+One';
 ul.dnav {
  list-style-type: none;
  margin-left: 0px;
  margin-right: 0px;
  overflow: hidden;
  width: 400px;
  -webkit-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
  -moz-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
  box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
}
li.dnav {
  font-size: 20px;
  background-color: #FFF;
  width: 100px;
  float: left;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 0px;
  border-style: solid;
  border-color: grey;
  border-bottom-width: 5px;
  border-left-width: 0px;
  border-top-width: 0px;
  border-right-width: 0px;
}
li.dnav a {
  color: grey;
  font-family: 'Fjalla One', sans-serif;
  display: block;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}
li.dnav a:hover {
  background-color: #fff;
  opacity: 1;
  overflow: hidden;
  color: rgba(0, 130, 255, 1);
  border-color: rgba(0, 130, 255, 1);
}
li.dnav:hover {
  border-color: rgba(0, 130, 255, 1);
}
a:active {
  background-color: #fff;
  opacity: 1;
  overflow: hidden;
  color: rgba(0, 130, 255, 1);
}
li.dnav-active {
  border-color: rgba(0, 130, 255, 1);
  border-bottom-width: 5px;
  border-left-width: 0px;
  border-top-width: 0px;
  border-right-width: 0px;
  color: rgba(0, 130, 255, 1);
}

＆＃13;

<header>
  <ul class="dnav">
    <li class="dnav dnav-active"><a class="active" href="#">Home</a>
    </li>
    <li class="dnav"><a href="#">ser</a>
    </li>
    <li class="dnav"><a href="#">con</a>
    </li>
  </ul>
</header>

＆＃13;

Answer 2

问题是你的目标是悬停选择器中的'a'元素。边框放在'li'元素上。

因此，当您将鼠标悬停在元素上时，只有'a'元素的边框正在改变。

你可以在hovering时重写你的css来定位LI（正如我在片段中所做的那样），但是我可以建议完全设置'a'元素而不是'li'。

在下面的代码段中，悬停对“悬停”选择器进行了少量更改。

@import 'https://fonts.googleapis.com/css?family=Fjalla+One';
 ul.dnav {
  list-style-type: none;
  margin-left: 0px;
  margin-right: 0px;
  overflow: hidden;
  width: 400px;
  -webkit-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
  -moz-box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
  box-shadow: 0px 5px 30px 8px rgba(128, 128, 128, 1);
}
li.dnav {
  font-size: 20px;
  background-color: #FFF;
  width: 100px;
  float: left;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 0px;
  border-style: solid;
  border-color: grey;
  border-bottom-width: 5px;
  border-left-width: 0px;
  border-top-width: 0px;
  border-right-width: 0px;
}
li.dnav a {
  color: grey;
  font-family: 'Fjalla One', sans-serif;
  display: block;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}

li.dnav:hover {
  background-color: #fff;
  opacity: 1;
  overflow: hidden;
  color: rgba(0, 130, 255, 1);
  border-color: rgba(0, 130, 255, 1);
}
a:active {
  background-color: #fff;
  opacity: 1;
  overflow: hidden;
  color: rgba(0, 130, 255, 1);
}
li.dnav-active {
  border-color: rgba(0, 130, 255, 1);
  border-bottom-width: 5px;
  border-left-width: 0px;
  border-top-width: 0px;
  border-right-width: 0px;
  color: rgba(0, 130, 255, 1);
}

<header>
  <ul class="dnav">
    <li class="dnav dnav-active"><a class="active" href="#">Home</a>
    </li>
    <li class="dnav"><a href="#">ser</a>
    </li>
    <li class="dnav"><a href="#">con</a>
    </li>
  </ul>
</header>

CSS / HTML文本onhover不会改变

2 个答案: