css put href parameter on entire div not only on text

Question

I am trying to put an entire div inside an href parameter using CSS but it's not working when I want to give a color to my link.

 .nav_link a {color:#c2c2c2;text-decoration:none;} .nav_link a:visited {color:#c2c2c2;} .nav_link a:hover {color:#b1b1b1;} 

 <a class="nav_link" href="#"><div class="nav_home">Link 1</div></a> <a class="nav_link" href="#"><div class="nav">Link 2</div></a> <a class="nav_link" href="#"><div class="nav">Link 3</div></a> <a class="nav_link" href="#"><div class="nav">Link 4</div></a> 

Answer 1

below is updated code

 .nav_link { color:#c2c2c2; text-decoration:none; } .nav_link:visited { color:#c2c2c2; } .nav_link:hover { color:#b1b1b1; } 

 <a class="nav_link" href="#"><div class="nav_home">Link 1</div></a> <a class="nav_link" href="#"><div class="nav">Link 2</div></a> <a class="nav_link" href="#"><div class="nav">Link 3</div></a> <a class="nav_link" href="#"><div class="nav">Link 4</div></a> 

Answer 2

Remove a tag from .nav_link a:hover , a_visited because .nav_link is a class of your a Tag =)

 .nav_link { color:#c2c2c2; text-decoration:none; } .nav_link:visited { color:#c2c2c2; } .nav_link:hover { color:#b1b1b1; } 

 <a class="nav_link" href="#"><div class="nav_home">Link 1</div></a> <a class="nav_link" href="#"><div class="nav">Link 2</div></a> <a class="nav_link" href="#"><div class="nav">Link 3</div></a> <a class="nav_link" href="#"><div class="nav">Link 4</div></a> 

Answer 3

Your CSS selectors are wrong. a has the class nav_link , so .nav_link a actually targets nothing. You can do a.nav_link or just .nav_link .

Answer 4

If you want the hover to affect other elements' css, you'll need something like this:

a:visited > .nav{color:#c2c2c2;text-decoration:none;}

ie- when a is visited, change the color of the .nav element inside it.