area元素与链接的嵌套演示页面

展示

提问交流 »

//zxx: 看看蓝底文字的链接是不是和整个卡片的链接不一样？

Chrome Only实现

张鑫旭，09年华中科技大学毕业，就职于阅文集团，专注web前端偏前领域，著有“CSS世界”三部曲、你并不精通HTML

全兼容实现

张鑫旭，09年华中科技大学毕业，就职于阅文集团，专注web前端偏前领域，著有 “CSS世界”三部曲、你并不精通HTML

代码

HTML-Chrome only：

<a href="./intro-person.html" class="layout">
    <div class="avatar">
        <img src="/assets/myself.jpg" alt="示例图片">
    </div>
    <div class="detail">
        <p>...著有<span class="link">
            <area href="./intro-book.html">
            “CSS世界”三部曲
        </span>、<span class="link">
            <area href="./intro-book.html">
            你并不精通HTML
        </span></p>
        <p>查看更多 »</p>
    </div>
</a>

HTML-兼容实现：

<a href="./intro-person.html" class="layout">
    <div class="avatar">
        <img src="/assets/myself.jpg" alt="示例图片">
    </div>
    <div class="detail">
        <p>...著有<span class="link">
            <img class="area" usemap="#introBook">
            “CSS世界”三部曲
        </span>、<span class="link">
            <img class="area" usemap="#introBook">
            你并不精通HTML
        </span></p>
        <p>查看更多 »</p>
    </div>
    <!-- map位置任意 -->
    <map id="introBook" name="introBook">
        <area shape="rect" coords="0,0,9999,9999" href="./intro-book.html">
    </map>
</a>

CSS：

.layout {
    display: flex;
    max-width: 320px;
    margin-inline: auto;
    padding: .75rem;
    color: inherit;
    gap: .5rem;
    background-color: #f5f5f5;
}
.layout:active {
    background-color: #eee;
}
.avatar img {
    display: block;
    width: 80px; height: 80px;
    object-fit: cover;
    object-position: top;
}
.link {
    background-color: var(--ui-blue);
    color: #fff;
    display: inline-block;
    position: relative;
    line-height: 1.375;
}
.link area {
    position: absolute;
    inset: 0;
}
.area {
    width: 100%; height: 100%;
    position: absolute;
    inset: 0;
    opacity: 0;
}