Jump to content

[HTML & CSS] <li> <a class "active" hover not working correctly

W1ll1aming
By W1ll1aming
in Programs, Apps and Websites
 Share
Go to solution Solved by Vishera,
24 minutes ago, ughiwanthackintosh said:

thats not it kinda but close! 

Home is supposed to be read all the time and change to a brigther red.

 

sorry i dont explain properly thanks for your time

Do you mean like this?: 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.sidenav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

ul.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
 
 ul.sidenav li a.active {
  background-color: #800000;
  color: white;
}
 
ul.sidenav li a.active:hover {
  background-color: red;
  color: white;
}

ul.sidenav li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 25%;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 900px) {
  ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
  }
  
  ul.sidenav li a {
    float: left;
    padding: 15px;
  }
  
  div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  ul.sidenav li a {
    text-align: center;
    float: none;
  }
}
</style>
</head>
<body>

<ul class="sidenav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div class="content">
  <h2>Responsive Sidenav Example</h2>
  <p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
  <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
  <h3>Resize the browser window to see the effect.</h3>
</div>

</body>
</html>

 

Posted

i cant figure out how to add hover style to this html:

https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive

 

Sorry for being a noob if its obvious,  

ul.sidenav li a.active:hover {
color: #800000;
}

i tried this code but i changes the text? instead? i want it to change the button background

Link to comment
https://linustechtips.com/topic/1110906-html-css/
Share on other sites
Link to post
Share on other sites
Posted

You can add in html bgcolor=”#800000” inside the <> within the appropriate tags,

for example:

<table bgcolor=”#800000”>

or

<body bgcolor=”#800000”>

 

I stopped programming 8 years ago but this should work lol.

 

Edit: Didn't notice it was hover,i will edit my comment to correct myself lol.

Edit2:

I tested and this worked: 

ul.sidenav li a.active:hover {
  background-color: #800000;
}

Nice reddish backgrond lol

A PC Enthusiast since 2011
AMD Ryzen 7 5700X@4.65GHz | GIGABYTE GTX 1660 GAMING OC @ Core 2085MHz Memory 5000MHz
Cinebench R23: 15669cb | Unigine Superposition 1080p Extreme: 3566
Link to comment
https://linustechtips.com/topic/1110906-html-css/#findComment-12944163
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, Vishera said:

You can add in html bgcolor=”#800000” inside the <> within the appropriate tags,

for example:

<table bgcolor=”#800000”>

or

<body bgcolor=”#800000”>

 

I stopped programming 8 years ago but this should work lol.

what

im confused do i put that in the  

ul.sidenav li a.active:hover {
background-color: #800000;
}

 

Link to comment
https://linustechtips.com/topic/1110906-html-css/#findComment-12944171
Share on other sites
Link to post
Share on other sites
Posted
21 minutes ago, ughiwanthackintosh said:

what

im confused do i put that in the  


ul.sidenav li a.active:hover {
background-color: #800000;
}

 

For you the whole code tested and working: 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.sidenav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

ul.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
 
ul.sidenav li a.active:hover {
  background-color: #800000;
}

ul.sidenav li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 25%;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 900px) {
  ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
  }
  
  ul.sidenav li a {
    float: left;
    padding: 15px;
  }
  
  div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  ul.sidenav li a {
    text-align: center;
    float: none;
  }
}
</style>
</head>
<body>

<ul class="sidenav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div class="content">
  <h2>Responsive Sidenav Example</h2>
  <p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
  <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
  <h3>Resize the browser window to see the effect.</h3>
</div>

</body>
</html>

 

A PC Enthusiast since 2011
AMD Ryzen 7 5700X@4.65GHz | GIGABYTE GTX 1660 GAMING OC @ Core 2085MHz Memory 5000MHz
Cinebench R23: 15669cb | Unigine Superposition 1080p Extreme: 3566
Link to comment
https://linustechtips.com/topic/1110906-html-css/#findComment-12944198
Share on other sites
Link to post
Share on other sites
Posted
1 hour ago, ughiwanthackintosh said:

i cant figure out how to add hover style to this html:

https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive

 

Sorry for being a noob if its obvious,  


ul.sidenav li a.active:hover {
color: #800000;
}

i tried this code but i changes the text? instead? i want it to change the button background

ul.sidenac li a.active:hover changes the color for  everything that's text when you use "color", to change background color you   should only need the "li" and background-color: #000;

 

You don't even need and shouldn't nest serval ID,Tags and classes together while you're still learning.

 

Simply break them up like il{background-color: #000;}

ul.sidenav {} etc etc and set the values you want.

 

When you are more comfortable you can nest tags, id and classes and end up with

 

#example .example li {} or #example,#example2{}

 

p.s you don't even need to specify it as ul.sidenav{} you can use just "ul{}" or .sidenav{} and it would have the same results.

Link to comment
https://linustechtips.com/topic/1110906-html-css/#findComment-12944346
Share on other sites
Link to post
Share on other sites
Posted
  • Author
20 hours ago, Vishera said:

For you the whole code tested and working: 


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.sidenav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

ul.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
 
ul.sidenav li a.active:hover {
  background-color: #800000;
}

ul.sidenav li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 25%;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 900px) {
  ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
  }
  
  ul.sidenav li a {
    float: left;
    padding: 15px;
  }
  
  div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  ul.sidenav li a {
    text-align: center;
    float: none;
  }
}
</style>
</head>
<body>

<ul class="sidenav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div class="content">
  <h2>Responsive Sidenav Example</h2>
  <p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
  <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
  <h3>Resize the browser window to see the effect.</h3>
</div>

</body>
</html>

 

thats not it kinda but close! 

Home is supposed to be read all the time and change to a brigther red.

 

sorry i dont explain properly thanks for your time

Link to comment
https://linustechtips.com/topic/1110906-html-css/#findComment-12946189
Share on other sites
Link to post
Share on other sites
Posted
  • Author
19 hours ago, AbsoluteFool said:

ul.sidenac li a.active:hover changes the color for  everything that's text when you use "color", to change background color you   should only need the "li" and background-color: #000;

 

You don't even need and shouldn't nest serval ID,Tags and classes together while you're still learning.

 

Simply break them up like il{background-color: #000;}

ul.sidenav {} etc etc and set the values you want.

 

When you are more comfortable you can nest tags, id and classes and end up with

 

#example .example li {} or #example,#example2{}

 

p.s you don't even need to specify it as ul.sidenav{} you can use just "ul{}" or .sidenav{} and it would have the same results.

i dont understand a thing 

#example .example li 

i understand it somewhat but where is the name of the li replaces example

Link to comment
https://linustechtips.com/topic/1110906-html-css/#findComment-12946196
Share on other sites
Link to post
Share on other sites
Posted
  • Solution
24 minutes ago, ughiwanthackintosh said:

thats not it kinda but close! 

Home is supposed to be read all the time and change to a brigther red.

 

sorry i dont explain properly thanks for your time

Do you mean like this?: 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.sidenav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

ul.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
 
 ul.sidenav li a.active {
  background-color: #800000;
  color: white;
}
 
ul.sidenav li a.active:hover {
  background-color: red;
  color: white;
}

ul.sidenav li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 25%;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 900px) {
  ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
  }
  
  ul.sidenav li a {
    float: left;
    padding: 15px;
  }
  
  div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  ul.sidenav li a {
    text-align: center;
    float: none;
  }
}
</style>
</head>
<body>

<ul class="sidenav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div class="content">
  <h2>Responsive Sidenav Example</h2>
  <p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
  <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
  <h3>Resize the browser window to see the effect.</h3>
</div>

</body>
</html>

 

A PC Enthusiast since 2011
AMD Ryzen 7 5700X@4.65GHz | GIGABYTE GTX 1660 GAMING OC @ Core 2085MHz Memory 5000MHz
Cinebench R23: 15669cb | Unigine Superposition 1080p Extreme: 3566
Link to comment
https://linustechtips.com/topic/1110906-html-css/#findComment-12946222
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 hours ago, Vishera said:

Do you mean like this?: 


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.sidenav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

ul.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
 
 ul.sidenav li a.active {
  background-color: #800000;
  color: white;
}
 
ul.sidenav li a.active:hover {
  background-color: red;
  color: white;
}

ul.sidenav li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 25%;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 900px) {
  ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
  }
  
  ul.sidenav li a {
    float: left;
    padding: 15px;
  }
  
  div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  ul.sidenav li a {
    text-align: center;
    float: none;
  }
}
</style>
</head>
<body>

<ul class="sidenav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div class="content">
  <h2>Responsive Sidenav Example</h2>
  <p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
  <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
  <h3>Resize the browser window to see the effect.</h3>
</div>

</body>
</html>

 

YES!! ?!!

Link to comment
https://linustechtips.com/topic/1110906-html-css/#findComment-12946345
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programs, Apps and Websites

×