使FA更改颜色：使用<li> </li>悬停

时间：2015-04-15 00:07:42

标签： html css colors hover font-awesome

我目前正在使用侧面导航栏进行操作，该导航栏将由旧汉堡按钮启用。

/* * 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＆amp;

  • 文字颜色。

    最终： 将鼠标悬停在备受尊重的ul li元素上时，如何使文本和字体真棒图标都改变颜色

    • 3 个答案:

    答案 0 :(得分：2)

    您的标记存在问题，<a>应位于<li>内。 <li>必须直接在<ul>下，您可以将它们一起修复。

    ＆＃13;
    ＆＃13; 
    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;
}
*/
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    答案 1 :(得分：0)

    这个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;
}

    .....

    ＆＃13;
    ＆＃13; 
    /* * 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;
}
    ＆＃13; 
    <!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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    答案 2 :(得分：0)

    移动＆＃34;：悬停＆＃34;选择器到您实际将要悬停的标签。然后指定您想要受影响的子元素，以便它采用此形式。

    #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;
}
    相关问题
    最新问题