html - 如何仅通过 CSS 使具有相同类的 div 链接到 Wordpress 中的不同 URL？

Question

我正在尝试使整个推荐磁贴在 WordPress 主题中可点击。主题是Orfeo，站点是storytwirl.com

推荐磁贴有两个 div - 外部 div 类 card card-testimonial card-plain 没有链接到任何东西，内部 div 类 card-avatar链接到 URL。

主题支持 _card-avatar 中的链接。但我希望整个 div 类 card card-testimonial card-plain 链接到与其内部 div 类 card-avatar 相同的 URL。共有三个推荐磁贴，我希望它们链接到三个不同的 URL。

我没有找到通过 Wordpress 访问 HTML 的方法，只是将链接移动到 card card-testimonial card-plain div。我也没有在 php 文件中看到有关此类的任何信息。

这三个图 block 之间的唯一区别是 div 类 card-avatar 中的 a href 和 title。

我在 Wordpress Customizer 中使用“Additional CSS”来添加 CSS，使 card card-testimonial card-plain 类的 div 看起来像可点击的，但实际上我无法在其中添加链接div。而且我不知道如何仅使用 CSS 向每张推荐卡添加三个不同的链接。你能帮忙吗？

是否可以采用此 CSS 代码，并为三个 card card-testimonial card-plain div 中的每一个添加一个链接，每个 tile 都有不同的 URL？

/* CSS that makes tiles look clickable but does not add actual links */
div.card.card-testimonial {
  cursor: hand;
  cursor: pointer;
  opacity: .9;
}

a.divLink {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-decoration: none;
  /* Makes sure the link doesn't get underlined */
  z-index: 10;
  /* raises anchor tag above everything else in div */
  background-color: white;
  /*workaround to make clickable in IE */
  opacity: 0;
  /*workaround to make clickable in IE */
  filter: alpha(opacity=0);
  /*workaround to make clickable in IE */
}

这是 HTML:

<div class="card card-testimonial card-plain">
<div class="card-avatar">
<a href="http://storytwirl.com/topic/animation-ideas/"><img class="img" src="http://storytwirl.com/wp-content/uploads/2018/10/legal-alien-round-icon-190x190.png" alt="Animation Ideas" title="Animation Ideas"></a>
</div>
<div class="content">
<h4 class="card-title">Animation Ideas</h4>
<h6 class="category text-muted">Stories for Films, Series, Games &amp; More</h6>
<p class="card-description">I have plenty of ideas for animated films, TV series, web series, games, and live action. Variety of styles, variety of audiences, and variety of genres. I would love to develop these ideas with you or jump onto your idea to help to develop it into full production.</p>
</div>
</div>

感谢 Andrei Gheorghiu 回答这个问题! =)

Answer 1

这样做就可以了:

div.card.card-testimonial {
  position: relative;
}
div.card.card-testimonial a:before {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  content: '';
}

它创建一个 before <a> 上的伪元素并用 position:relative 填充最近的父级(这是卡)。如果卡片中没有设置z-index，它也会呈现在卡片中的所有其他内容之上。 .

它实际上充当了卡片的全部点击，将它们提供给其父级 <a> .

注意:如果 card 的任何元素子元素和 <a> 的祖先元素，此技术就会中断有position:relative它还为卡片中的每个 链接创建伪元素。在这种情况下，卡片将指向其 DOM 中的最后一个链接，因为它将被放置在最后。