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

【问题标题】：Making FA change color on :hover with <li>使 FA 在 :hover 上改变颜色 <li>
【发布时间】：2015-06-20 18:42:46
【问题描述】：

我目前正在开发一个侧面导航栏，该导航栏将由旧的汉堡包按钮启用。

/* * 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 元素上时，如何使文本和字体真棒图标都改变颜色

【问题讨论】：

标签： html css colors hover font-awesome

【解决方案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>

【讨论】：

感谢您的回复！
我仍然有问题，但是当我第一次扎根于这个概念时，我试图用最热门的评论来解决这些问题

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：

感谢您的回答。我设法将放在
内（我认为有些奇怪）。但是，我现在遇到了这个问题：prntscr.com/6tv69d（文本没有改变颜色，只有图标）

@user3063286 我又更新了答案，好像就这么简单就可以一起解决了，暂时忘掉这个伪问题吧。

好的，我已经更新了它，我基本上回到了第一格，现在没有填充。 prntscr.com/6tv9pz（结果）prntscr.com/6tv9zg（html & css）。顺便谢谢你的帮助。 PS 添加了一个代码笔，让生活更轻松：codepen.io/anon/pen/MYNEBm

@user3063286 使用.navigation li a:hover, .navigation li a:hover .fa {...}，就是这样，演示-codepen.io/anon/pen/qEePyM