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>

I'm not saying it is stupid, I am just saying I didn't understand what you wrote... ;) — Bgi, Sep 07 '12 at 20:04
@OTARIKI No, it's not. It's actually a good question, it just needed some better phrasing. I've edited it, so please tell me if I got something wrong... — Jon Egeland, Sep 07 '12 at 20:04
@Jon your edited version is right, you understood my question good. But this is answer on my question, where you give me: `
` and I think this is very easy and also stupid qestion because answers on these questions, should think self :( So, thank you very much. — Oto Shavadze, Sep 07 '12 at 20:18

score 5 · Answer 1 · answered Sep 07 '12 at 19:52

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.

score 3 · Answer 2 · answered Sep 07 '12 at 19:52

3

Try this:

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

answered Sep 07 '12 at 19:52

M. Mennan Kara

10,072
2
35
39

score 3 · Accepted Answer · answered Sep 07 '12 at 19:54

3

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 Sep 07 '12 at 19:54

Jon Egeland

12,470
8
47
62

This is actually a terrible suggestion as `div` is not allowed to be nested within inline elements such as `a`. Making the `a` tag `display: block` or use a different inline tag such as `span` within the `a` and make it `display: block` is the appropriate way to go. – cimmanon Sep 08 '12 at 13:27
1

@cimmanon but if you look at the HTML5 spec, it is allowed...Not saying you're wrong, but it is technically allowable and makes more sense from a design standpoint (IMO). – Jon Egeland Sep 08 '12 at 19:03

score 1 · Answer 4 · answered Sep 07 '12 at 19:54

1

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 :-)

answered Sep 07 '12 at 19:54

alex1975

23
4

score 0 · Answer 5 · edited May 23 '17 at 12:12

0

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.

edited May 23 '17 at 12:12

Community

1
1

answered Sep 07 '12 at 19:53

Alexander Van Atta

870
11
34

score 0 · Answer 6 · answered Sep 07 '12 at 19:54

0

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.

answered Sep 07 '12 at 19:54

Ed Heal

59,252
17
87
127

That is what it should be, but it is possible to do style with JS and interact with CSS... – Jon Egeland Sep 07 '12 at 19:56
@Jon - Yes, but keep it simple so that you can give the page a fresh look at a drop of a hat. As to JS - some people (eg corporate) have this switched off. They are fossils we know but could be a big customer. – Ed Heal Sep 07 '12 at 20:02
@jon - Lots are things are possible but one should not do it. – Ed Heal Sep 07 '12 at 20:11

score 0 · Answer 7 · answered Sep 07 '21 at 05:40

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.

Make link, without "a href" and without JS

7 Answers7