div全体をリンクにしたときに一部を除外したい

下記の図のようにカード全体のリンクをJavaScriptでexample.com/post/1にした場合に一部を除外したい場合はどのようにしたらいいのでしょうか。
（<div class="text">の部分のリンクを無効）

HTML
1<div class="post-card">
2<a herf="example.com/user/user_id">
3 <div claas="user">
4  <img src="user-icon.png" class="user-icon">
5  <p class="username">ユーザーネーム</p>
6  <p class="user_id">@User_id</p>
7 </div>
8</a>
9 <a href="example.com/post/1" class="link"></a>
10 <div class="text">
11  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
12 </div>
13</div>

JavaScrip
1
2$('.post-card').click(function() {
3location.href = $(this).find('.link').attr('href');
4});

行動規範の内容に同意します

回答3件

CSSのみでも実現できます。

css
1.post-card {
2  position: relative;
3}
4.post-card .link { 
5/*リンクを .post-card 全体に拡張*/
6  position: absolute;
7  top: 0;
8  width: 100%;
9  height: 100%;
10}
11.post-card a:first-child {
12/*ユーザーリンクを前面へ*/
13  display: block;
14  width: 200px;
15  height: 100px; 
16  position: relative;
17  z-index: 1;
18}
19.text{
20 /*テキストを前面へ*/
21 position: relative;
22  z-index: 1; 
23}