Question

我有一些看起来像这样的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文本的定位？有什么想法吗？

到目前为止，我想到了可能的解决方案：

缓存关于元素悬停的标题标签信息，使用jQuery将其删除，然后在mouseout上恢复，但该解决方案看起来很难看。

我的目标是避免使用JS。

更新：查看我的fiddle。如果你把它拖到足够长的时间，你会看到我的意思。

Answer 1

当您触发图像加载时，将图像元素的alt值存储在变量中。

然后，将images alt值设置为空字符串。当您将鼠标移出图像并隐藏拇指时，请重新应用之前存储的alt值。

我使用jquery .data（）将旧的alt值存储在“data-alt”属性中

链接标题标签通过ajax悬停元素显示

1 个答案: