Make link, without "a href" and without JS

Issue

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>

Solution

You can’t make an element with CSS, but you can wrap your div with an a tag instead. It would look like this:

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

That makes the entire div a link to whatever your href is.

CSS3 does have the content property now, but I don’t think you can put raw HTML into it. That would be pretty bad security wise if anyone had access to your .css files…

Anyways, I think the above solution is the simplest way to achieve what you asked.

Answered By – Jon Egeland

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.