如何将一组链接（在卡片中）转换为标题上的一个链接？

Posted 2023-02-15

【中文标题】如何将一组链接（在卡片中）转换为标题上的一个链接？

【英文标题】：How to transform a cluster of links (in a card) to only one link on the title?

【发布时间】：2021-09-14 13:37:22

【问题描述】：

我有一张卡片，里面有 3 个链接（具有相同的 url），这对 SEO 不利。我希望标题（H3）上只有一个链接，但保持所有卡片均可点击。在 css 中可以吗？

<article class="overflow-hidden transition-shadow duration-300 rounded">
  <%= link_to post_path(post.slug),aria: label:'article', class: "inline-block text-black no-underline transition-colors duration-200 hover:text-deep-purple-accent-700" do %>
    <%= image_tag photo(post, 400, 400), class:"object-cover w-full h-64 rounded-lg"%>
  <% end %>

  <div class="py-2">
    <%= link_to post_path(post.slug), aria: label:'article', class: "inline-block mb-3 text-black no-underline transition-colors duration-200 hover:text-deep-purple-accent-700" do %>
      <h3 class="text-2xl font-bold leading-5"><%= post.title %></h3>
    <% end %>
    <span class="absolute bg-gray-500 text-white right-4 top-4 py-1 px-2 flex rounded-lg">
      <svg>...</svg>
      <%= post.reading_time %> min
    </span>

    <p class="mb-4 text-gray-700"><%= post.meta_description %></p>
    <div class="flex space-x-4">
      <%= link_to post_path(post.slug),aria: label:'article', class: "flex items-start text-gray-800 transition-colors duration-200 hover:text-deep-purple-accent-700 group" do %>
        <div class="mr-2">
          <svg>....</svg>
        </div>
        <p class="font-semibold"><%= post.comments_count %></p>
      <% end %>
    </div>
  </div>
</article>

【参考方案1】：

是的，您可以使用 CSS 来做到这一点。只需复制下面给出的 CSS 并在 <a> 标签中使用它。通过使用这个，所有父 div 区域都将充当可点击的链接。

.stretched-link::after 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";

<div>
    <h1>I am not anchor tag.</h1>
    <h2>I am not anchor tag.</h2>
    <h3>I am not anchor tag.</h3>
    <a href="#" class="stretched-link">I am an anchor tag</a>
</div>

【讨论】：

H3 链接在一个 div 中，但这个 div 不是卡片的 div 父级。 codepen.io/tioneb12/pen/YzVyrPv

它将作为其父范围内的链接。