【问题标题】:Can't change font-color on hover li by using a href无法使用href更改悬停li上的字体颜色
【发布时间】:2017-07-13 11:41:02
【问题描述】:

我想在悬停整个 li 标签时更改字体颜色,而不仅仅是在 a 标签上悬停。 background-color 应该和之前一样(没有悬停) 找不到错误在哪里。请帮帮我!谢谢!

nav {
  background: #000;
  min-height: 85px;
  position: fixed;
  z-index: 20;
  width: 100%;
  margin-top: 35px;
  transition: 0.35s all ease;
  max-width: 1800px;
}

nav ul {
  float: right;
  text-align: left;
  display: inline;
  margin: 0;
  list-style: none;
  padding: 1rem;
  transition: 0.35s all ease;
}

nav ul li {
  font: 700 18px sans-serif;
  margin-right: -4px;
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  letter-spacing: 0.1rem;
  display: inline-block;
  color: white;
  padding: 1rem 2rem;
  text-transform: uppercase;
  /*font-family: sans-serif;*/
}

nav ul li a:hover {
  color: #BD1521;
  transition: 0.35s all ease;
}

nav ul li:hover {
  color: #BD1521;
  transition: 0.35s all ease;
}

nav ul li a {
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: #fff;
}
<nav>
  <a href="index.html"><img class="logo" src="assets/svg/logo-foddis-inverse.svg"></a>
  <ul id="menu">

    <li>Leistungen
      <ul class="dropdown">
        <li><a href="#">Reparatur &amp; Instandsetzung</a></li>
        <li><a href="#">Lackierung &amp; Folierung</a></li>
        <li><a href="#">Restauration &amp; Sonderumbau</a></li>
        <li><a href="#">Autoglas &amp; Folie</a></li>
        <li><a href="#">Fahrzeugaufbereitung</a></li>
        <li><a href="#">Service Plus</a></li>
      </ul>
    </li>

    <li>Über Uns
      <ul class="dropdown">
        <li><a href="#">Unternehmen</a></li>
        <li><a href="#">Unser Team</a></li>
        <li><a href="#">Karierre</a></li>
        <li><a href="#">Impressum</a></li>
        <li><a href="#">AGB's</a></li>
        <li><a href="#">Datenschutz</a></li>
      </ul>
    </li>

    <li><a href="#">Kontakt</a></li>
    <li><a href="#"><button class="nav_button"><span>Angebote</span></button></a></li>

    <li class="subbar" style="padding-top: 5px;"><i class="fa fa-clock-o" aria-hidden="true" style="padding-right:10px;"></i>Öffnungszeiten: 9:00-18:00 Uhr</li>
    <li class="subbar"><i class="fa fa-phone" aria-hidden="true" style="padding-right:10px;"></i>176 311 81 41 8</li>
    <li class="subbar"><a href="mailto:example@example.de"><i class="fa fa-envelope" aria-hidden="true" style="padding-right:10px;"></i>example@example.de</a></li>

  </ul>
</nav>

【问题讨论】:

  • 这意味着你会像往常一样在链接上设置颜色吗?
  • @ Bernhard - 非常感谢!有用! xD
  • 标签: html css navigation hover href


    【解决方案1】:

    您需要专门更改color 上的锚点li:hover

    nav ul li:hover a {
    color: #BD1521;
    transition: 0.35s all ease;
    }
    

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签