Turn Div into Link
I'm trying to turn a div into a link. The code below works fine in firefox but in IE the mouse pointer doesn't react to the link. Is there a way around this? Thanks.
<html>
<head>
<style type="text/css">
.test{
width:100%;
height:100px;
background:#666666;
}
</style>
</head>
<body>
<a href="ht开发者_Go百科tp://www.google.com">
<div class="test">
kjlkjlkjkljl
</div>
</a>
</body>
</html>
Why do you want to use a div as a link?
Can't you just display your link as block?
a{
display:block;
}
Or use a span instead of a div.
As Welbog noted, the <a> and <div> elements should be reversed:
<div class="test">
<a href="http://www.google.com">
Lorem ipsum
</a>
</div>
Then in your style, you can make the <a> tag expand to fill the entire div:
.test a {
display: block;
width: 100%;
height: 100%;
}
I think IE's actually responding properly in this case.
A div is a block-level element; so it shouldn't be contained within an inline-element such as, for example, an a. If you use a span (in place of div) does that work in both IE and Firefox?
If you want to make it look like a link (in terms of the cursor), then you may want to 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. */
}
You can use the Cursor CSS Property. http://www.w3schools.com/CSS/pr_class_cursor.asp
But, your HTML is not correct. You cannot put a <div> inside an <a> tag like that.
Try:
.test{
width:100%;
height:100px;
background:#666666;
cursor: pointer;
}
This is the best way to do it as used on the BBC website and the Guardian:
http://codepen.io/IschaGast/pen/Qjxpxo
heres the 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 the 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;
}
加载中,请稍侯......
精彩评论