5

如果我在锚点中有图像，如何使锚点的标题出现，而不是图像元素的标题？

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

例如

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

如果您将鼠标悬停在链接上，它将显示“图像标题”。

我试过的

使用 CSS，我想也许我可以更改 z-indexes 以将锚点推到前面，或者我可以将锚点显示为一个块并给它图像的宽度和高度。这没有用。请参阅此处的JSFiddle 。

我希望找到使用 CSS 或 HTML 的解决方案。

我想这样做的原因是我正在使用 Wordpress，吐出帖子和缩略图。我希望缩略图链接到某个页面，并且我希望为链接设置一个通用标题，但它从单个缩略图中获取标题。这是 Wordpress/PHP 代码：

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

5 回答 5

8

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

<?php the_post_thumbnail('thumbnail', array('title' => '')); ?>
于 2012-12-11T21:20:12.780 回答
5

这提供了一个通用的解决方案，不考虑 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 示例

于 2012-12-12T09:10:03.853 回答
2

只需<span>在图像上放置一个透明的，具有透明背景和所需的标题属性。

标记

<a href="#">

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

</a>​

CSS

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;
}​

我刚刚分叉了你的小提琴，至少在 Chrome 中工作。

于 2012-12-11T21:19:47.327 回答
0

http://jsfiddle.net/hnmuj/

CSS：

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

} ​</p>

HTML：

<a title="Anchor Title" id="foo">
    <span></span>
    <img title="Image Title" />
</a>​
于 2012-12-11T21:25:32.877 回答
0

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

于 2012-12-11T21:20:26.837 回答