All geek questions in one place

Turn the div into a link

I am trying to turn a div into a link. The code below works fine in firefox, but in IE the mouse pointer does not respond to the link. Is there any way around this? Thanks.

<html> <head> <style type="text/css"> .test{ width:100%; height:100px; background:#666666; } </style> </head> <body> <a href="http://www.google.com"> <div class="test"> kjlkjlkjkljl </div> </a> </body> </html>
+4
source share
6 answers

I think IE really answers correctly in this case.

A div is a block level element; therefore, it should not be contained within an inline element, such as, for example, a . If you use span (instead of div ), does this work in both IE and Firefox?

If you want to make it look like a link (from the point of view of the cursor), then you can use:

 a > div, /* please change your mark-up to the following */ a > span {cursor: hand; /* for earlier versions of IE */ cursor: pointer; /* for, I think, IE 7+ and FF etc. */ }
+1
source

Why do you want to use div as a link?

Can't you just display your link as a block?

 a{ display:block; }

Or use span instead of div .

+8
source

As Welbog noted, the <a> and <div> elements must be undone:

 <div class="test"> <a href="http://www.google.com"> Lorem ipsum </a> </div>

Then, in your style, you can expand the <a> tag to fill the entire div:

 .test a { display: block; width: 100%; height: 100%; }
+4
source

You can use the CSS Property of the cursor. http://www.w3schools.com/CSS/pr_class_cursor.asp

But your HTML is incorrect. You cannot put a <div> inside the <a> tag.

0
source

Try:

 .test{ width:100%; height:100px; background:#666666; cursor: pointer; }
0
source

This is the best way to do this, as used on the BBC and Guardian website:

http://codepen.io/IschaGast/pen/Qjxpxo

heres html

 <div class="highlight block-link"> <h2>I am an example header</h2> <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p> </div>

heres CSS

 /** * Block Link * * A Faux block-level link. Used for when you need a block-level link with * clickable areas within it as directly nesting a tags breaks things. */ .block-link { position: relative; } .block-link a { position: relative; z-index: 1; } .block-link .block-link__overlay-link { position: static; &:before { bottom: 0; content: ""; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; white-space: nowrap; z-index: 0; } &:hover, &:focus { &:before { background: rgba(255,255,0, .2); } } } .highlight { background-color: #ddd; }
0
source

Source: https://habr.com/ru/post/1299345/

More articles:


All Articles