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.
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.
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.
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;" ...
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.
You can add the onclick for JavaScript into the div.
<div onclick="location.href='newurl.html';"> </div>
EDIT: for new window
<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;"> </div>
You can put an <a>
element inside the <div>
and set it to display: block
and height: 100%
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With