Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML - how to make an entire DIV a hyperlink? [duplicate]

How do I make an entire DIV a clickable hyperlink. Meaning, I essentially want to do:

<div class="myclass" href="example.com">     <div>...</div>     <table><tr>..</tr></table>     .... </div> 

And whenever someone mouse hovers of the myclass DIV, I want the entire DIV it to be a clickable hyperlink.

like image 470
Teddyk Avatar asked Feb 02 '10 22:02

Teddyk


People also ask

How do you make a whole div a clickable link?

We simply add the onlcick event and add a location to it. Then, additionally and optionally, we add a cursor: pointer to indicate to the user the div is clickable. This will make the whole div clickable.

Can a div have a href?

you can't use the href attribute on a div element. to make a whole div a link you need to wrap div element within an anchor element i.e.

How do you wrap a div in a link?

You can put an anchor tag inside of the divs... make it the last element in the divs, and style it to be display block, and to fill up 100% width and height (you may need to specify the height). Then have it "position: absolute;" and have the outermost div "position: relative;" ...

How do you make a whole card clickable?

You can wrap block elements with <a> . It is valid HTML5 and renders your card clickable. You may need to adjust the css rules for the text inside this block however.


2 Answers

You can add the onclick for JavaScript into the div.

<div onclick="location.href='newurl.html';">&nbsp;</div> 

EDIT: for new window

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;">&nbsp;</div> 
like image 189
Joel Etherton Avatar answered Oct 17 '22 05:10

Joel Etherton


You can put an <a> element inside the <div> and set it to display: block and height: 100%.

like image 42
SLaks Avatar answered Oct 17 '22 06:10

SLaks