CODEWITHSUNDEEP
htmlcss
Gorvilla
Gorvilla

Reputation: 21

How would I get my links to change color when hovering over li?

When I hover over my links the actual links only change color if I hover over them directly. Anyway I can make the text change color when I hover over the actual li instead? Thanks.

I'm still learning so if you see faults in my code please let me know. Cheers!

body {
  background: url('bg.jpg');
  margin: 0px;
  padding: 0px;
}

nav {
  background-color: #ffffff;
  width: 80%;
  height: 60px;		
  margin: 200px auto auto auto;
}

nav ul {
  list-style-type: none;
  margin: auto;
}

nav li {
  display: inline-block;
  line-height: 60px;
  float: right;
}

nav a {
  text-decoration: none;
  color: #b0b0b0;
  font-family: 'verdana', sans-serif;
  padding: 0 20px;
  font-size: 0.85em;


}

nav a:hover {
  color: #ffffff;
  transition: color 0.8s ease;
}

nav li:hover {
  background-color: #5db0c6;
}

#head-image {
  background: url('land.png');
  width: 80%;
  height: 400px;
  margin: auto;
}

#second-header {
  width: 80%;
  height: 60px;
  margin: auto;
  background-color: #ffffff;
}

#third-header {
  width: 80%;
  height: 700px;
  margin: auto;
  background-color: #ededed;
}
<!DOCTYPE html>
<html>
  <head>
    <title>site</title>
    <meta name="description" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="styles.css" />
    <link href='https://fonts.googleapis.com/css?family=Libre+Franklin' rel='stylesheet' type='text/css'>
    <script src="js/jquery.min.js"></script>
    <!--[if lt IE 8]>
<![endif]-->
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="">Gamerscoin</a></li>
        <li><a href="">Testimonials</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">RS3</a></li>
        <li><a href="">RS7</a></li>
        <li><a href="">CSGO</a></li>
        <li><a href="">POE</a></li>
        <li><a href="">LoL</a></li>
        <li><a href="">Path of Exile</a></li>
        <li><a href="">Habbo</a></li>
      </ul>
    </nav>
    <div id="head-image"></div>
    <div id="second-header"></div>
    <div id="third-header"></div>
  </body>
</html>

Upvotes: 0

Views: 76

Answers (4)

John Boga
John Boga

Reputation: 532

you can still use tag names after hover command like this:

nav li:hover a{

color: #ffffff;
transition: color 0.8s ease;

}

Upvotes: 0

Shaggy
Shaggy

Reputation: 6796

The downside of simply changing the color of your links when hovering their parents is that it will give the impression that the entite li is clickable, which it won't be. To get around this, set the display property of your links to block, forcing the links to occupy the full space available in their parents.

nav {
    background-color: #ffffff;
    width: 80%;
    height: 60px;
    margin: 200px auto auto auto;
}
nav ul {
    list-style-type: none;
    margin: auto;
}
nav li {
    display: inline-block;
    line-height: 60px;
    float: right;
}
nav a {
    display: block;
    text-decoration: none;
    color: #b0b0b0;
    font-family: 'verdana', sans-serif;
    padding: 0 20px;
    font-size: 0.85em;
}
nav a:hover {
    background-color: #5db0c6;
    color: #ffffff;
    transition: color 0.8s ease;
}
<nav>
    <ul>
        <li><a href="">Gamerscoin</a></li>
        <li><a href="">Testimonials</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">RS3</a></li>
        <li><a href="">RS7</a></li>
        <li><a href="">CSGO</a></li>
        <li><a href="">POE</a></li>
        <li><a href="">LoL</a></li>
        <li><a href="">Path of Exile</a></li>
        <li><a href="">Habbo</a></li>
    </ul>
</nav>

Upvotes: 0

Fergal Andrews
Fergal Andrews

Reputation: 314

nav li:hover a {
    color: #b0b0b0;
}

Upvotes: 1

Wowsk
Wowsk

Reputation: 3675

Use the CSS selector nav li:hover a instead. This is essentially saying that when the li in the nav is hovered over change the a element inside the li.

The property now looks like: 

nav li:hover a{
    color: #ffffff;
    transition: color 0.8s ease;
}


body {
    background: url('bg.jpg');
    margin: 0px;
    padding: 0px;
}

nav {
background-color: #ffffff;
    width: 80%;
    height: 60px;       
    margin: 200px auto auto auto;
}

nav ul {
    list-style-type: none;
    margin: auto;
}

nav li {
    display: inline-block;
    line-height: 60px;
    float: right;
}

nav a {
    text-decoration: none;
    color: #b0b0b0;
    font-family: 'verdana', sans-serif;
    padding: 0 20px;
    font-size: 0.85em;


}

nav li:hover a{
    color: #ffffff;
    transition: color 0.8s ease;
}

nav li:hover {
    background-color: #5db0c6;

}

#head-image {
    background: url('land.png');
    width: 80%;
    height: 400px;
    margin: auto;
}

#second-header {
    width: 80%;
    height: 60px;
    margin: auto;
    background-color: #ffffff;
}

#third-header {
    width: 80%;
    height: 700px;
    margin: auto;
    background-color: #ededed;


}
<!DOCTYPE html>
<html>
<head>

  <title>site</title>

  <meta name="description" content="" />

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <link rel="stylesheet" href="styles.css" />
  <link href='https://fonts.googleapis.com/css?family=Libre+Franklin' rel='stylesheet' type='text/css'>
  <script src="js/jquery.min.js"></script>
  <!--[if lt IE 8]>
  <![endif]-->

</head>
<body>
    <nav>
        <ul>
            <li><a href="">Gamerscoin</a></li>
            <li><a href="">Testimonials</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">RS3</a></li>
            <li><a href="">RS7</a></li>
            <li><a href="">CSGO</a></li>
            <li><a href="">POE</a></li>
            <li><a href="">LoL</a></li>
            <li><a href="">Path of Exile</a></li>
            <li><a href="">Habbo</a></li>
        </ul>
    </nav>
<div id="head-image"></div>
<div id="second-header"></div>
<div id="third-header"></div>
</body>
</html>

Upvotes: 4

Related Questions