Php 使用锚定标题而不是图像标题

如果锚中有图像，如何使锚的标题显示，而不是图像元素的标题

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

例如

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

我想这样做的原因是我在和Wordpress合作，发布帖子和缩略图。我希望缩略图链接到某个页面，我希望有一个通用的链接标题，但它是从单个缩略图的标题。以下是Wordpress/PHP代码：

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

只需在图像上放置一个透明的
，背景为透明，标题属性为所需

标记

<a href="#">

    <img title="Image Title" />
    <span title="Div Title"></span>    

</a>​

我只是，至少在Chrome中工作。
在
$attr
数组中的
title
属性中传递一个空字符串：

我认为删除img title属性是最简单的解决方案。

CSS:

}
​

HTML:


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

HTML:

结果


请参见从图像中删除标题..：/@Wordpress要求图像在上传到媒体库时必须有标题。我希望把这个给一个客户端（所以我不相信他们通过FTP上传和通过URL指定图像）。：）@popleak所说的可能很有效，因为只需要一个“alt”。此外，如果你在CSS中为链接添加
display:block
，它可能会起作用。它需要一个标题并不意味着它必须出现在HTML中。steveax已经在我面前写下了如何删除它。还有一个问题是
指针事件：无
对我来说是最好的解决方案。这是Wordpress的一个很好的解决方案。我在寻找一个更普遍的解决方案+1最佳解决方案-我的答案是框架不可知，因为我对WP一无所知[幸运的是！]。这实际上只是元素的顺序导致了一个标题的优先权。考虑到质量的替代品，这真的很糟糕。但是很好。不推荐。有趣的解决方案，但跨度覆盖了整个页面的宽度。我希望与页面上的其他元素冲突。您是否将
a
设置为
display:block
和
position:relative
？CSS是我首选的解决方案。谢谢
<a href="#">

    <img title="Image Title" />
    <span title="Div Title"></span>    

</a>​

img { width:50px;height:50px;background:blue; }
a, img { position:absolute; } 
a { z-index:4;display:block;width:50px;height:50px; }
img { z-index:2; }
​span{
    top:0;
    left:0;
    position:absolute;
    width:50px;
    height:50px;    
    display:block;
    z-index:100;
    background-color:transparent;
}​

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

#foo {
    position:relative;
    display:block;    
}
#foo span {
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
    top:0;
    left:0;
    display:block;   

<a title="Anchor Title" id="foo">
    <span></span>
    <img title="Image Title" />
</a>​

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

a {
  display: inline-block;
}

img {
  pointer-events: none;
}