我正在尝试在WordPress主题中单击整个推荐瓷砖。主题是Orfeo, 网站是storytwirl.com
见证磁贴具有两个div-未与任何内容链接的外部div类卡卡片-见证卡平原和与URL链接的内部div类卡头像。
主题支持_card-avatar中的链接。但我希望将整个div类卡卡片-证明书卡片链接到与其内部div类卡化身相同的URL。一共有三个个人鉴定磁贴, 我希望它们链接到三个不同的URL。
我没有找到通过Wordpress访问HTML的方法, 而只是将链接移动到卡证言证卡平原div。我也没有在php文件中看到有关此类的任何信息。
这三个磁贴之间的唯一区别是div类card-avatar中的href和title。
我在Wordpress Customizer中使用了”
其他CSS”
来添加CSS, 从而使具有类卡, 证人证和普通证件的div看起来像是可单击的, 但实际上无法将链接添加到这些div中。而且我不知道如何仅使用CSS将三个不同的链接添加到每个证明卡。你能帮我吗?
是否可以采用此CSS代码, 并为三个卡卡-证人卡-普通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://img.readke.com/220530/19134Kc3-0.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回答了这个问题! =)
#1这样做:
div.card.card-testimonial {
position: relative;
}
div.card.card-testimonial a:before {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
content: '';
}
它在你的< a> 上创建一个before伪元素, 并用position:relative(这是卡片)填充最近的父元素。如果卡中没有任何东西具有固定的z索引, 则它也将显示在卡中的所有其他东西之上。
实际上, 它是你卡的万能点击, 将其分配给其父< a> 。
【如何仅通过CSS使同一类的div链接到WordPress中的不同URL()】注意:如果卡的任何子元素和< a> 的祖先元素具有position:relative, 则此技术会中断, 并且还会为卡中的每个链接创建伪元素。在这种情况下, 卡将指向其DOM中的最后一个链接, 因为它将放置在最后。
推荐阅读
- 如何在WordPress中制作分类,子分类和项目明细,文件下载()
- 如何遍历自定义帖子类型并返回每个自定义分类法
- 如何在WordPress page.php中加载style.css根目录,内容中包含single.php
- 如何在将HTML模板转换为wordpress主题时链接style.css文件
- 如何遍历WordPress中的菜单项()
- 如何将自定义wordpress页面模板保留在主题文件夹以外的其他文件夹中
- AIOps探索揭秘日志异常检测新方法
- 设计模式-- 建造者模式详解
- pm2 重启策略(restart strategies)