我有一些看起来像这样的HTML:
<figure class="thumb">
<a href="#" class="thumb-link" title="My title">
<img src="small-png.png" alt="My alt">
</a>...
当有人悬停此链接时,jQuery会放大图像(使用ajax获取并将其投入DOM),代码开始如下所示:
<figure class="thumb">
<a href="#" class="thumb-link" title="My title">
<img src="small-png.png" alt="My alt">
</a>
<div class='thumb-hover' display: 'block'>
<img>...</img>
</div> //the image was loaded
拇指悬停z-index是999,它显示在它应该的小png之上,但链接TITLE文本在大预览图像中闪耀,因为它相当大,它阻挡了一半!
如果在初始.thumb-link之前加载了拇指悬停,问题仍然存在。 有没有办法控制Title文本的定位?有什么想法吗?
到目前为止,我想到了可能的解决方案:
我的目标是避免使用JS。
更新:查看我的fiddle。如果你把它拖到足够长的时间,你会看到我的意思。
答案 0 :(得分:0)
当您触发图像加载时,将图像元素的alt值存储在变量中。
然后,将images alt值设置为空字符串。当您将鼠标移出图像并隐藏拇指时,请重新应用之前存储的alt值。
我使用jquery .data()将旧的alt值存储在“data-alt”属性中