参见英文答案 >
Links inside of larger clickable areas (CSS Only)2
我想要一个包含一个图像的div,一些文本是一个链接.所以可以点击div中的任何地方(不一定是图像或文本),并将其移动到一个位置.不过,我也希望在文本末尾有另一个链接,将用户带到另一个位置.但是,一旦添加第二个链接,整个div就不再是一个链接,只是图像和文本是链接.是我想做的可能吗
我想要一个包含一个图像的div,一些文本是一个链接.所以可以点击div中的任何地方(不一定是图像或文本),并将其移动到一个位置.不过,我也希望在文本末尾有另一个链接,将用户带到另一个位置.但是,一旦添加第二个链接,整个div就不再是一个链接,只是图像和文本是链接.是我想做的可能吗
解决方法
在HTML中是不可能的,因为元素中的元素是不允许的.通过现有的HTML规范,您不能在其中使用div,但这种限制从未真正被浏览器强制执行,并且已经在HTML5草稿中解除了.嵌套元素是一个不同的问题,因为它将在活动中创建一个活动区域,其含义将需要定义,这将是令人困惑的.
使用时在实践中会发生什么
<a href=foo>bla bla <a href=bar>inner link</a> stuff</a>
它是以你想要的方式工作的,除了内部一个元素之外的一个元素的内容完全不是一个链接.显然浏览器没有准备好处理这样的结构.实际上,它们意味着关闭< / a>当他们遇到< a>一个元素打开时的标签.很像他们为p元素.
所以在一个链接结尾处的一个内部链接将会排序工作.当然不能保证它将继续在未来版本的浏览器中工作,或者它适用于所有浏览器.
您可以连续使用两个单独的非嵌套元素,并将第二个元素视觉上放在第一个元素中,使用CSS定位.但这会变得有点复杂.一个更简单的方法是设置一个JavaScript伪链接：
<span onclick="document.location.href = 'foo'; return false">inner link</span>
