Question

我正在帮朋友设置一个Wordpress页面，我遇到了一个无法解决问题的问题。

我在侧边栏中添加了一些图像小部件，这些小部件链接到网站上的不同类别。问题是图像文本应位于半透明框中的图像顶部，并且此框不是可单击的链接。是否可以在框中添加相同的链接？

小部件生成一个HTML结构，如下例所示，我添加了一些CSS来显示半透明文本框的外观。

＆＃13;

figcaption {
  position: relative;
  height: 80px;
  width: 300px;
  background: white;
  top: -235px;
  left: 85px;
  padding-top: 60px;
  text-align:center;
  opacity: 0.8;
  font-weight: bold;
  font-size: 140%
}

＆＃13;

<figure>
  <a href="some link">
    <img src="http://static.highsnobiety.com/wp-content/uploads/2016/09/07200609/super-mario-run-iphone-7-01-480x320.jpg">
  </a>
  <figcaption>Super Mario</figcaption>
</figure>

＆＃13;

Answer 1

如果您无法更改html，则必须使用javascript / jquery来实现此目的。在WordPress小部件管理器中，创建一个新的纯文本小部件并将其粘贴到：

<script>
jQuery(function($){
  var $sidebar = $('.sidebar'); // change this selector to target your sidebar
  $sidebar.find('figcaption').on('click',function(e){
    e.preventDefault();
    $(this).parents('figure').eq(0).find('a').click();
  });
</script>

或者，为了防止Wordpress添加<p>，请将其全部放在一行：

   <script>jQuery(function($){var $sidebar = $('.sidebar'); $sidebar.find('figcaption').on('click',function(e){e.preventDefault();$(this).parents('figure').eq(0).find('a').click();});</script>

Answer 2

外观>自定义>其他CSS

figcaption
{
    cursor: pointer;
    pointer-events: none;
}

图片Wordpress

2 个答案: