使用 CSS 或可能的替代方案设置'title'属性的样式？

Question

我制作了一个带有"图像缩略图查看器2"的小型图像库链接到这里

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

我只想改变一些基本功能，如字体系列、字体大小、边距等。

<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属性或完全用另一种方式。

谢谢-关于堆栈溢出的第二篇文章，所以如果我做错了什么，请告诉我。

Answer 1

正如@Aziz所指出的，您需要针对插件生成的标记（HTML）。

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

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

Answer 2

您可能需要修改js脚本来插入特定的标记：示例：我添加了一个<p>，而不是<br/>https://jsfiddle.net/x7w12etr/2/（固定和更新的小提琴）

modified:（注意，您可以向这个额外的标签添加一个类或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)
    },