Turn Div into Link_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-17 07:02 出处：网络

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.

相关专题：css

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;
}

Turn Div into Link

精彩评论

关注公众号

热门标签

图文推荐

Turn Div into Link

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：