javascript - clickable figcaption link on top of image Wordpress - Stack Overflow

admin管理员组

文章数量:1313186

I'm helping a friend setting up a Wordpress page and I have an issue that I can't figure out how to fix.

I have added some image widgets to the sidebar that links to different categories on the site. The problem is that the image text should be on top of the image in a semi transparent box, and this box is not a clickable link. Is it possible to add the same link to the box?

The widget generates an HTML structure like shown in the example below and I have added some CSS to show how the semi transparent text box looks like.

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%
}

<figure>
  <a href="some link">
    <img src=".jpg">
  </a>
  <figcaption>Super Mario</figcaption>
</figure>

I'm helping a friend setting up a Wordpress page and I have an issue that I can't figure out how to fix.

I have added some image widgets to the sidebar that links to different categories on the site. The problem is that the image text should be on top of the image in a semi transparent box, and this box is not a clickable link. Is it possible to add the same link to the box?

The widget generates an HTML structure like shown in the example below and I have added some CSS to show how the semi transparent text box looks like.

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%
}

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

• javascript
• html
• css
• wordpress
• hyperlink

Share Improve this question Follow asked Aug 2, 2017 at 17:56 MewbMewb 4711 silver badge55 bronze badges 5

• why can you put figcaption inside the <a> tag? jsfiddle/qzjgvLfy – Grasper Commented Aug 2, 2017 at 18:00
• Hey Grasper This HTML is automatically generated by Wordpress and I can't seem to find, where I can edit it. Is it possible to do somewhere? Because that would be an easy fix :) – Mewb Commented Aug 2, 2017 at 18:06
• If you can't change the html, you could do it with javascript. Is that an option? – JakeParis Commented Aug 2, 2017 at 18:09
• create a custom widget and use that instead wpbeginner./wp-tutorials/… – Grasper Commented Aug 2, 2017 at 18:14
• Thanks for the advice Grasper! – Mewb Commented Aug 2, 2017 at 19:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

Appearance > Customise > Additional CSS

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

If you can't change the html, you'll have to use javascript/jquery to achieve this. In the WordPress widget manager, create a new plain text widget and paste this in:

<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>

Or, to prevent Wordpress from adding <p> put it all on one line:

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

本文标签： javascriptclickable figcaption link on top of image WordpressStack Overflow