<a>
不支持嵌套。例如:
<a href="#1">11111111111<a href="#2">22222222222</a></a>
浏览器会将其解析为相邻兄弟关系,而不是父子关系。
所以,如果我们有链接嵌套的需求,就可以试试使用<area>
元素。
对于传统嵌套链接一般方法有:
1.改变视觉DOM结构和顺序,使链接内容变成相邻关系,再通过CSS重新布局定位。
2.使用JS,点击目标区域preventDefault
阻止默认事件,然后再location.href
跳转之类
实际上,还有一种更好的做法,就是<a>
元素中嵌套<area>
元素,可以保证DOM结构符合视觉呈现,又无需JS辅助。
eg.
<a href="......" class="book-layout" target="_blank"> <img src="book.jpg" class="book-cover" alt="area" usemap="#bookCover"> <map id="bookCover" name="bookCover"> <area shape="rect" coords="0,0,200,21" href="/book/1003477570" alt="area" target="_blank"> </map>
</a>
通过<a>元素中嵌套<map>和<area>对于图片类的链接可完美使用,
如果是文字类的链接由于考虑到Firefox浏览器不支持(Firefox的<area>
元素默认display:none
,且无法重置,同时ie8及以下不支持,
可以使用透明图片覆盖 然后使用<area>。
如果无需考虑firefox等兼容性,可直接使用 position:absolute实现,使用<area>
元素覆盖的方法还有一些局限:无法使用键盘Tab索引访问,如果没有外面的<a>
元素是可以的,有了之后,这种取巧的做法就不行了
<h4 class="book-title"> <area class="area" href="....." target="_blank"> area </h4>
.book-title { position:relative; } .book-title > .area { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
具体更多内容可访问原创作者http://www.zhangxinxu.com/wordpress/2017/05/html-area-map/