Make link, without "a href" and without JS

Question

I want to make my entire div a link like the a tag. Of course this may be possible with js, but I'm interested in seeing if this is possible to do with only css.

I have this:

#my_div {
  width: 200px;
  background-color: #090;
}

#my_div:hover {
  background-color: #0f0;
}

Where the page structure is:

<div id="my_div"><a href="http://google.com">link</a></div>

Answer 1

You can make inline elements act as block level elements by setting their display property to block:

/* Make all a tags that are decedents of the
   element with an id of `my_div` be displayed as block level elements */
#my_div a {
    display: block;
    width: 200px;
    height: 100px;
    text-align: center;
    background-color: #090;
}
/* Handle the color change on hover */
#my_div a:hover { background-color: #0f0; }

You don't actually need the wrapping div - you can just target the particular a tag directly if you give it a class or id.

Answer 2

Try this:

#my_div a {
    display: block;
    width: 100%;
}

Answer 3

You need to set your pseude class to the a tag not to the div:

#my_div a:hover { 
    background-color: #0f0; 
} 

That should do it's work :-)

Answer 4

I think you should check out this question that was posted to stack overflow. Make a div into a link It was the first result on Google for how to make a div a link.

Answer 5

Please:

• HTML adds structure to content (e.g. chapters of a book, what is emphasized ...)
• CSS adds what colors/fonts/placement for those items
• Javascript adds makes it interactive.

Answer 6

You weren't clear whether you meant without "a href" or without using the "<a" tag.

If, on the offchance you meant the latter, the only other way I can think to make something clickable go someplace is to make it a form submit button.