How to change div background color with pseudo-classes?-CodePudding

So, this code is made to change the background color of "DIV 1 or 2", which is inside a DIV element, when "LINK 1 or 2" is clicked, which is also inside a table element. This uses pseudo-classes. But what I don't understand is that when LINK 1 or 2 is clicked, the DIV background does not change, and when the mouse hovers over the DIV, the background color change, but the background color does not extend all the way to the entire box / DIV element. Can anyone see what's wrong with this code? Thanks.

The code:

<!DOCTYPE html>
<html>
      <head>
            <title> My personal code </title>
            
            <meta charset="UTF-8">
            <meta name="author" content="ME">
            <meta name="keywords" content="HTML, CSS, JavaScript">
            <meta name="revised" content="20-10-2021">

            <link rel="icon" href="icon.png" type="image/gif">
            
            <style>
                  a.one:link {color:red;}
                  a.one:visited {color:blue;}
                  a.one:hover {color:#orange;}

                  a.two:link {color:red;}
                  a.two:visited {color:blue;}
                  a.two:hover {font-size:150%;}
                  
                  a.three:link {color:red;}                  
                  a.three:visited {color:blue;}
                  a.three:hover {background-color:orange;}
 
                  a.four:link {color:red;}
                  a.four:visited {color:blue;}
                  a.four:hover {font-family:monospace;}

                  a.five:link {color:red;text-decoration:none;}
                  a.five:visited {color:blue;text-decoration:none;}
                  a.five:hover {text-decoration:underline;}
                  
                       div {
                       width: 300px;
                       border: 15px solid black;
                       padding: 50px;
                       margin: 20px;
                       background-color: white;
                       }
                       tr {
                         display: block;
                       }
            </style>

     </head>
     <body>

<table>
<table style=" width: 500px; height=40px; border:1px solid black;background-color: white;">
     <tr>
           
           <td colspan="100" style=border-style:solid ; border-width:1px"><p>LINK 1</p> </td>/*click this
                
           <td colspan="100" style=border-style:solid ; border-width:1px"><p>LINK 2</p></td>
     </tr>      
</table>     
<br>
     
     
           <div>
           <p><b><a  href=#>DIV 1 </a></p>     
           </div>
           
           <div>
           <p><b><a  href=#>DIV 2 </a></p> 
           </div>    
           

   
     </body>
</html>

CodePudding user response：

use a.three:focus {color:blue;} instead of a.three:visited {color:blue;}

            <style>
                  
                  a.three {color:red;}                  
                  a.three:focus {color:blue;}
                  a.three:hover {background-color:orange;}
 
                       div {
                       width: 300px;
                       border: 15px solid black;
                       padding: 50px;
                       margin: 20px;
                       background-color: white;
                       }
                       tr {
                         display: block;
                       }
            </style>

<!DOCTYPE html>
<html>
      <head>
            <title> My personal code </title>
            
            <meta charset="UTF-8">
            <meta name="author" content="ME">
            <meta name="keywords" content="HTML, CSS, JavaScript">
            <meta name="revised" content="20-10-2021">

            <link rel="icon" href="icon.png" type="image/gif">
            

     </head>
     <body>

<table>
<table style=" width: 500px; height=40px; border:1px solid black;background-color: white;">
     <tr>
           
           <td colspan="100" style="border-style:solid ; border-width:1px"><p>LINK 1</p> </td>/*click this
                
           <td colspan="100" style="border-style:solid ; border-width:1px"><p>LINK 2</p></td>
     </tr>      
</table>     
<br>
     
     
           <div>
           <p><b><a  href="#">DIV 1 </a></b></p>     
           </div>
           
           <div>

CodePudding user response：

I'm not sure what you are trying to do exactly but I changed the following things:

Added the class names to LINK 1 and 2. (one and two).

<a href="#" >
<a href="#" >

In your original code, the reason the background color did not extend all the way out was because the style was only applied to the link. To solve this, I applied the style that was originally applied to your div, to the links themselves (the styles in a.three). Now the background is changed when the link is hovered.

                  a.one:link {color:red;}
                  a.one:visited {color:blue;}
                  a.one:hover {color:orange;}

                  a.two:link {color:red;}
                  a.two:visited {color:blue;}
                  a.two:hover {font-size:150%;}
                  
                  a.three:link {color:red;}                  
                  a.three:visited {color:blue;}
                  a.three:hover {background-color:orange;}
 
                  a.four:link {color:red;}
                  a.four:visited {color:blue;}
                  a.four:hover {font-family:monospace;}

                  a.five:link {color:red;text-decoration:none;}
                  a.five:visited {color:blue;text-decoration:none;}
                  a.five:hover {text-decoration:underline;}
                  
                       a.three {
                       display:inline-block;
                       border: 15px solid black;
                       padding: 50px;
                       margin: 20px;
                       background-color: white;
                       
                       }
                       tr {
                       display: block;
                       
                       }

<title> My personal code </title>

<meta charset="UTF-8">
<meta name="author" content="ME">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="revised" content="20-10-2021">

<link rel="icon" href="icon.png" type="image/gif">

<body>

  <table style=" width: 500px; height=40px; border:1px solid black;background-color: white;">
    <tr>

      <td colspan="100" style="border-style:solid; border-width:1px">
        <p><a href="#" >LINK 1</a></p>
      </td>

      <td colspan="100" style="border-style:solid; border-width:1px">
        <p><a href="#" >LINK 2</a></p>
      </td>
    </tr>
  </table>

  <a  href=#>
    <b>DIV 1</b>
  </a>
  <br></br>
  <a  href=#>
    <b>DIV 2</b>
  </a>