1

单击图像时显示文本的最简单标记是什么？

没有切换、CSS 或 Javascript。我有一系列拇指，我想在单击时为其添加标题。我一直在寻找似乎如此简单的几个小时，但我就是不明白。

4

5 回答 5

2

以下方法相当简单，但它使图像标题文本仅在单击页面中的其他内容以跟踪链接之前可见。（这是否可以的问题还不是很清楚。）

使用 CSS 使图像标题文本最初不可见。使图像成为其标题的链接，并使用:target伪类在单击链接时将标题变为可见。演示：jsfiddle。

<style>
a img { border: none; }
.caption { visibility: hidden; }
.caption:target { visibility: visible; }
</style>
<a href=#capt1><img src=test1.png alt=foo></a>
<div class=caption id=capt1>Image caption text</div>
<a href=#capt2><img src=test2.png alt=foo></a>
<div class=caption id=capt2>Image caption text 2</div>

作为副作用，由于单击链接，页面可能会向下移动。如果这是一个问题，您可以改用“自指向”链接：

<a href=#capt1 id=capt1><img src=test1.png alt=foo><br>
<span class=caption>Image caption text</span></a>

然后您将修改基本 CSS 规则中的选择器：

:target .caption { visibility: visible; }

This works across browsers except IE 8 and older. They can be covered using polyfill, i.e. JavaScript code that emulates support to the pseudo-element in browsers without native support. See Polyfill for css :target, not(), and [tilde] sibling selectors?

于 2012-12-15T07:41:08.597 回答
1

这会起作用

<label for="toggle">
    <img src="your image path" />
</label>
<input type="checkbox" id="toggle" />
<span>your text here</span>

对于 CSS

#toggle{
    position: absolute;
    top: -9999px;
    left: -9999px;
}

span{
    display: none;
}

#toggle:checked + span{
    display: block;
}

img{
    cursor: pointer;
}

但是这样做违反了 HTML 的语义规则。

结果在这里。

于 2012-12-15T05:59:12.977 回答
0

对每个图像使用 jQuery on()，然后在标题上使用这些点击事件来 .toggleClass('visible')。

于 2012-12-15T05:50:10.113 回答
0

你也许可以让它与类似的东西一起工作：

<img src="myimage.png" tabindex="1" /><div class="caption">Some text!</div>

CSS：

img~.caption{display:none}
img:active~.caption{display:block}

然而，这充其量只是hacky。像这样的事情真的应该在 JavaScript 中完成。

于 2012-12-15T05:51:17.080 回答
-1

有办法吗？是的！有没有跨浏览器的方法？不！

如果您不担心它是跨浏览器或有效的 HTML，那么这可以工作：

http://jsfiddle.net/charlescarver/XRBCF/

HTML：

<input hidden/>​

CSS：

input{
    -webkit-appearance:none;
    -o-apperance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    padding:0;
    border:0;   
    background-image:url(http://placedog.com/400/300);
    height:300px;
    width:400px;
    display:block;
    cursor:default;
}

input:focus{
    outline: none;
}

input:focus:after{
    content:"TEST";
    background-color:red;
    height:30px;
    width:100%;
    display:block;
    position:relative;
    top:270px;
}
​
于 2012-12-15T06:16:23.910 回答