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

时间:2013-11-07 17:31:37

标签: javascript jquery html lightbox2

我正在使用Lightbox2幻灯片显示表格中包含的缩略图。我的页面正在完成我想要的幻灯片和字幕。但是,当在点击缩略图以开始幻灯片放映之前的初始页面中,如果我将鼠标悬停在表格中的缩略图照片上,则会打开一个小框(如工具提示框),显示表格,灯箱选项,照片等的HTML代码我怎么能抑制这个显示?

顺便说一句,这在包含类似代码的Milkbox中不会发生。

最后,如果我删除Lightbox代码以便单击缩略图打开该缩略图的完整大小的图像,则不会发生此行为。

以下是我在Intranet上存在页面时修改的一些示例代码:

<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文件是从网上下载的

1 个答案:

答案 0 :(得分:1)

问题解决了。我的问题与此链接hide title attribute from link on mouse hover with 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'));});

});