鼠标悬停显示 Lightbox2 和 Milkbox 照片的 HTML

Mouse over shows HTML for Lightbox2 and Milkbox photos

本文关键字：照片 HTML Milkbox 悬停 显示 Lightbox2 鼠标      更新时间：2023-09-26

我正在使用Lightbox2来幻灯片显示表格中包含的缩略图中的照片。 我的页面正在为幻灯片和标题做我想要的。 但是，在单击缩略图开始幻灯片放映之前的初始页面中，如果我将鼠标悬停在表格中的缩略图照片上，则会打开一个小框（如工具提示框），显示表格的 HTML 代码、灯箱选项、照片等。 如何抑制此显示？

顺便说一下，这在具有类似代码的 Milkbox 中不会发生。

最后，如果我删除灯箱代码，以便单击缩略图打开该缩略图的全尺寸图像，则不会发生此行为。

以下是我修改的一些示例代码，因为该页面存在于我们的内部网上：

<table><tr>
<td id="mb1" align="center"><a id="mb1a" href="Photo1.jpg" data-lightbox="ga1" 
title="<table style='width:100%'><tr><td  style='width: 50%; border: 1px solid  #FFFFFF'<center>IGN Map</center></td><td style='width: 20'></td><td style='width:     50%; border: 1px solid #FFFFFF'><center>Carte IGN</center></span></td></tr>
<tr><td style='width: 50%; border: 1px solid #FFFFFF'>Right Click and choose 'Save Picture as...' to download this photo</td><td style='width: 20'></td>
<td style='width: 50%; border: 1px solid #FFFFFF'>Cliquer droit et choisir 'enregistrer l'image sous...' pour telecharger cette photo</td></tr></table>">
<img border="0" src="/thumbnail/Photo1.jpg" height="135" width="227" align="middle"/></a><br/>Map</td>
<td id="mb1" align="center"><a id="mb1a" href="Photo2.jpg" data-lightbox="ga1" 
title="<table style='width:100%'><tr><td  style='width: 50%; border: 1px solid #FFFFFF'><center>Google Earth</center></td><td style='width: 20'></td>
<td style='width: 50%; border: 1px solid #FFFFFF'><center>Google Earth</center></td></tr>
<tr><td style='width: 50%; border: 1px solid #FFFFFF'>Right Click and choose 'Save Picture as...' to download this photo</td><td style='width: 20'></td>
<td style='width: 50%; border: 1px solid #FFFFFF'>Cliquer droit et choisir 'enregistrer l'image sous...' pour telecharger cette photo</td></tr></table>">
<img border="0" src="/thumbnail/Photo2.jpg" height="96" width="227" align="middle"/></a><br/>Map2</td>
<td id="mb1" align="center"><a id="mb1a" href="Photo3.jpg" data-lightbox="ga1" 
title="<table style='width:100%'><tr><td  style='width: 50%; border: 1px solid #FFFFFF'><center>Profile</center></td><td style='width: 20'></td>
<td style='width: 50%; border: 1px solid #FFFFFF'><center>Profil</center></td></tr>
<tr><td style='width: 50%; border: 1px solid #FFFFFF'>Right Click and choose 'Save Picture as...' to download this photo</td><td style='width: 20'></td>
<td style='width: 50%; border: 1px solid #FFFFFF'>Cliquer droit et choisir 'enregistrer l'image sous...' pour telecharger cette photo</td></tr></table>">
<img border="0" src="/thumbnail/Photo3.jpg" height="164" width="227" align="middle"/></a><br/>Profile</td>
</tr></table>

javascript和CCS文件是从网络下载的

问题解决了。 我的问题与此链接中的问题非常相似，使用 javascript/jquery 将鼠标悬停时隐藏链接的标题属性

对该答案的轻微修改解决了我的问题

<script src="jquery.js"></script>
<script>
$(function(){
$('a').hover(function(e){
    $(this).attr('data-title', $(this).attr('title'));
    $(this).removeAttr('title');
},
function(e){
    $(this).attr('title', $(this).attr('data-title'));
});
$('a').click(function(e){
    $(this).attr('title',$(this).attr('data-title'));});

}）;

相关文章：