使用锚点标题代替图像标题

Question

如果我在锚中有图像,我怎样才能显示锚的标题,而不是图像元素的标题？

我知道我可以用javascript删除title属性,但我希望有一个更简单的解决方案.

例如

<a title="Anchor Title"><img title="Image Title" /></a>

如果将鼠标悬停在链接上,它将显示"图像标题".

我试过的

使用CSS,我想也许我可以更改z索引以将锚点推到前面,或者我可以将锚点显示为块并给它图像的宽度和高度.这没用.见的jsfiddle 这里.

我希望找到一个CSS或HTML的解决方案.

我想这样做的原因是我正在使用Wordpress,吐出帖子和缩略图.我希望缩略图链接到某个页面,并且我希望链接具有通用标题,但它从各个缩略图中获取标题.这是Wordpress/PHP代码:

<a href="<?php the_permalink(); ?>" title="Click to see Featured Stories">
<?php the_post_thumbnail(); ?>
</a>

Answer 1

在缩略图title中的$attr数组中的属性中传递一个空字符串:

<?php the_post_thumbnail('thumbnail', array('title' => '')); ?>

Answer 2

这提供了一个通用的解决方案，而不管 WordPress。CSS 阻止标题显示。

HTML：

<a title="Anchor Title">
    <img title="Image Title" src="http://codepen.io/images/logo.png" />
</a>

使用 CSS：

a {
  display: inline-block;
}

img {
  pointer-events: none;
}

结果

参见CodePen 示例