Question

我正在尝试使整个主题图块在WordPress主题中可点击。主题是Orfeo，网站是storytwirl.com

见证图块有两个div-外部div类 card card-testimonial card-plain 没有任何链接，而内部div类 card-avatar 链接到URL。

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

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

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

我在Wordpress Customizer中使用了“其他CSS”来添加CSS，该CSS使具有 card card-testimonial card-plain 类的div看起来像可点击的，但是我却无法在其中添加链接divs。而且我不知道如何仅使用CSS将三个不同的链接添加到每个证明卡。你能帮忙吗？

是否可以使用此CSS代码，并为三个 card card-testingmonial card-plain div中的每个添加链接，为每个图块添加不同的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>。

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

如何仅通过CSS将同一类的div链接到Wordpress中的不同URL？

1 个答案: