借助area元素实现的链接嵌套功能实例页面

CSS代码：

.book-title {
    position:relative;
}
.book-title > .area {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
}

HTML代码：

<a href="/book/1003477570/369104934" class="book-layout" target="_blank">
    <img src="book.jpg" class="book-cover" alt="都市猎人 限时免费" usemap="#bookCover">
    <map id="bookCover" name="bookCover">
        <area shape="rect" coords="0,0,54,72" href="/book/1003477570" alt="都市猎人 限时免费" target="_blank">
    </map>
    <div class="book-cell">
        <div class="book-title-x">
            <h4 class="book-title">
                <area class="area" href="/book/1003477570" target="_blank">
                都市猎人
            </h4>
            <div class="book-title-r">继续阅读</div>
        </div>
        <div class="book-meta">都市猎人 | 读至第六百四十二章 不在意章</div>
        <div class="book-meta">
            <time class="book-meta-r">1天前</time>更新至 第六百四十二章 不在意
        </div>
    </div>
</a>

<a href="/book/1003477570/369104934" class="book-layout" target="_blank">
    <img src="book.jpg" class="book-cover" alt="都市猎人 限时免费" usemap="#bookCover">
    <map id="bookCover" name="bookCover">
        <area shape="rect" coords="0,0,200,21" href="/book/1003477570" alt="都市猎人 限时免费" target="_blank">
    </map>
    <div class="book-cell">
        <div class="book-title-x">
            <h4 class="book-title">
                <img src="data:image/gif;base64,R0lGODlhEAAQAIAAAP///wAAACH5BAEAAAAALAAAAAAQABAAAAIOhI+py+0Po5y02ouzPgUAOw==" class="area" usemap="#mapTitle">
                都市猎人
            </h4>
            <map id="mapTitle" name="mapTitle">
                <area shape="rect" coords="0,0,54,72" href="/book/1003477570" target="_blank">
            </map>
            <div class="book-title-r">继续阅读</div>
        </div>
        <div class="book-meta">都市猎人 | 读至第六百四十二章 不在意章</div>
        <div class="book-meta">
            <time class="book-meta-r">1天前</time>更新至 第六百四十二章 不在意
        </div>
    </div>
</a>