使 FA 在 :hover with <li> 上改变颜色

Question

我目前在侧边导航栏的基础上工作，它将由旧的汉堡包按钮启用。

/* * Navigation Menu
   * The Hambuger will open this 
   *

*/

.navigation-container {
  height: 100%;
  width: 240px;
  background: #FFFFFF;
  border-right: 2px solid #252525;
  position: fixed;
  top: 0;
  left: 0;
}

.navigation {
  width: 80%;
  padding: 0;
  margin: 0;
  margin-left: 10px;
}

.navigation ul {
  margin: 0;
  padding: 0;
  margin-top: 90px; 
  margin-left: 20px;
}

.navigation ul li {
  /* Setting the area */
  list-style: none;
  margin: 0 auto;
  padding: 20px 0px;
  /* Typography changes */
  text-decoration: none;
  color: #DDDDDD;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  /* Extra Styling */
  border-bottom: 1px solid #DDDDDD;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.navigation ul .fa {
  padding: 0;
  margin: 0;
  padding-right: 5px;
  font-size: 20px;
  color: #DDDDDD;
}

.navigation-container, .navigation li, > li {
  color: #252525;
}

.navigation ul li:hover {
  padding: 35px 0px;
  color: #252525;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>Aaron Ward's Portfolio</title>

  <!-- Stylesheet links -->
   <!-- Font Awesome -->
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

   <!-- Open Sans Typeface Import -->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600' rel='stylesheet' type='text/css'>

   <!-- Personal stylesheets -->
    <link rel="stylesheet" href="css/style.css">

</head>

<body>

<!-- NAVIGATION START -->
<div class="navigation-container">
 <div class="navigation">
  <ul>
   <a href="">
    <li>
     <i class="fa fa-home fa-fw"></i></span>
     HOME
    </li>
   </a>

   <a href="">
    <li>
     <i class="fa fa-connectdevelop fa-fw"></i>
     WORK
    </li>
   </a>

   <a href="">
    <li>
     <i class="fa fa-user fa-fw"></i>
     ABOUT
    </li>
   </a>

   <a href="">
    <li>
     <i class="fa fa-envelope fa-fw"></i>
     CONTACT
    </li>
   </a>
  </ul>
 </div>
</div>

</body>

正如您将鼠标悬停在 [ul li] 元素上时所看到的，超赞字体图标没有改变颜色。

我尝试添加以下内容（结果无效）：

.navigation ul li:hover, .navigation ul .fa:hover {
  padding: 35px 0px;
  color: #252525;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.navigation ul .fa:hover {
color: #252525;
}

但显然这行不通，因为我希望整个区域都影响两个元素（FA 和

文本颜色。

所以最终：将鼠标悬停在受人尊敬的 ul li 元素上时，如何使文本和 Font awesome 图标都改变颜色

Answer 1

这个CSS：

.navigation ul li:hover, .navigation ul li:hover .fa {
  padding: 35px 0px;
  color: #252525;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.......

/* * Navigation Menu
   * The Hambuger will open this 
   *

*/

.navigation-container {
  height: 100%;
  width: 240px;
  background: #FFFFFF;
  border-right: 2px solid #252525;
  position: fixed;
  top: 0;
  left: 0;
}
.navigation {
  width: 80%;
  padding: 0;
  margin: 0;
  margin-left: 10px;
}
.navigation ul {
  margin: 0;
  padding: 0;
  margin-top: 90px;
  margin-left: 20px;
}
.navigation ul li {
  /* Setting the area */
  list-style: none;
  margin: 0 auto;
  padding: 20px 0px;
  /* Typography changes */
  text-decoration: none;
  color: #DDDDDD;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  /* Extra Styling */
  border-bottom: 1px solid #DDDDDD;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.navigation ul .fa {
  padding: 0;
  margin: 0;
  padding-right: 5px;
  font-size: 20px;
  color: #DDDDDD;
}
.navigation-container,
.navigation li,
> li {
  color: #252525;
}
.navigation ul li:hover {
  padding: 35px 0px;
  color: #252525;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.navigation ul li:hover,
.navigation ul li:hover .fa {
  padding: 35px 0px;
  color: #252525;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>Aaron Ward's Portfolio</title>

  <!-- Stylesheet links -->
  <!-- Font Awesome -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

  <!-- Open Sans Typeface Import -->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600' rel='stylesheet' type='text/css'>

  <!-- Personal stylesheets -->
  <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <!-- NAVIGATION START -->
  <div class="navigation-container">
    <div class="navigation">
      <ul>
        <a href="">
          <li>
            <i class="fa fa-home fa-fw"></i>
            </span>
            HOME
          </li>
        </a>

        <a href="">
          <li>
            <i class="fa fa-connectdevelop fa-fw"></i>
            WORK
          </li>
        </a>

        <a href="">
          <li>
            <i class="fa fa-user fa-fw"></i>
            ABOUT
          </li>
        </a>

        <a href="">
          <li>
            <i class="fa fa-envelope fa-fw"></i>
            CONTACT
          </li>
        </a>
      </ul>
    </div>
  </div>

Answer 2

将“:hover”选择器移动到您实际要悬停的标签上。然后指定您想要影响的子元素，使其采用这种形式。

#parent:hover #child {
   /* ... */
}

因此您的选择器应如下所示（关于）。

.navigation ul li:hover {
      padding: 35px 0px;
      color: #252525;
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out;
}

.navigation ul:hover .fa {
      color: #252525;
}

Answer 3

您的标记有问题，<a> 应该在 <li> 内。而且<li>一定要在<ul>的直属下，大家一起修一次就可以了

a:hover {
  color: red;
}

/* if the above code didn't work for you
a:hover, a:hover .fa {
  color: green;
}
*/

/* if the above code didn't work for you
a:hover, a:hover .fa::before {
  color: blue;
}
*/

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul>
  <li>
    <a href="#">
      <i class="fa fa-home fa-fw"></i>
      HOME
    </a>
  </li>
</ul>

使 FA 在 :hover with <li> 上改变颜色

Making FA change color on :hover with <li>

html

css

colors

hover

font-awesome