将链接转换为链接

我试图将div转换为链接。下面的代码在Firefox中正常工作，但在IE中，鼠标指针不会对链接做出反应。有没有解决的办法？谢谢。将链接转换为链接

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

来源

2010-01-25 usertest

我认为IE在这种情况下实际上正确响应。

A div是块级元素;因此它不应包含在内联元素中，例如a。如果您使用span（代替div），那么在IE和Firefox中都可以工作吗？

如果你想让它看起来像一个链接（在光标而言），那么你可能需要使用：

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. */ 
}

来源

2010-01-25 17:50:32

您可以使用游标CSS属性。 http://www.w3schools.com/CSS/pr_class_cursor.asp

但是，您的HTML是不正确的。你不能在<a>这样的标签内放置<div>。

来源

2010-01-25 17:50:00 jgallant

尝试：

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

来源

2010-01-25 17:51:12

你为什么想用div作为链接？

难道你不能只显示你的链接为块？

a{ 
    display:block; 
}

或者使用span代替div。

来源

2010-01-25 17:51:49

由于Welbog指出的那样，<a>和<div>元素，应调换：

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

然后在你的风格，你可以使<a>标签扩展到填满整个DIV：

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

来源

2010-01-25 17:52:08 AaronSieb

这是BBC网站和卫报使用的最佳方式：

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

继承人的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>

继承人的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; 
}

来源

2016-07-06 12:34:11 jojojohn

将链接转换为链接

回答

相关问题