使用 CSS 或可能的替代方案来设计 'title' 属性？

Question

我用 'Image Thumbnail Viewer 2' Link here

制作了一个小图片库

脚本允许展开的图像下方的标题属性。一切正常，但我找不到在 title 属性中设置文本样式的方法。

我只想更改一些基本功能，即 font-family、font-size、边距等。没什么特别的。

<tr>
    <td>
        <a href="img/test%20images/IMG305eng.jpg" 
           rel="enlargeimage"  
           rev="targetdiv:main,trigger:click,preload:yes,fx:fade" 
           title="&lt;em&gt;Hello World&lt;/em&gt; - 2014 - 20x30x5cm">
           <img src="img/test%20images/IMG305eng.jpg">
        </a>
    </td>
</tr>

以上是一张图片缩略图的示例

每张图片下面都需要不同的标题。不确定是否值得使用 title 属性或完全以另一种方式进行。

谢谢 - stack-overflow 上的第二个 post 所以如果我做错了什么请告诉我。

Answer 1

您需要定位插件生成的标记 (HTML)，正如@Aziz 指出的那样。

您的文本（悬停图像时）包含在 ID 为 #loadedarea 的元素中。

#loadedarea {
    font-weight: bold;
    color: red;
}

Answer 2

您可能需要修改 js 脚本以插入特定标签：示例：相反 <br/> 我添加了 <p> https://jsfiddle.net/x7w12etr/2/（修复并更新了 fiddle）

修改：（注意你可以在这个额外的标签中添加一个class或id来保存图片的alt属性值）

 if (setting.link)
            imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
        imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<p>'+$anchor.attr('title') : '')+'</p></div>'
        return $(imghtml)
    }

从这里您可以使用 css 定位 p 。

原文：

if (setting.link)
            imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
        imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
        return $(imghtml)
    },

使用 CSS 或可能的替代方案来设计 'title' 属性？

Styling a 'title' attribute with CSS or possible alternatives?

html

css

title