当用户使用 JQuery 将鼠标悬停在链接上时如何显示图像

Posted 2023-05-07

【中文标题】当用户使用 JQuery 将鼠标悬停在链接上时如何显示图像

【英文标题】：How do I display an image when a user hovers over a link using JQuery

【发布时间】：2011-05-20 19:38:28

【问题描述】：

我有一份产品清单。

<ul>
<li><a href="chair.php">CHAIR</a></li>
<li><a href="table.php">TABLE</a></li>
<li><a href="sofa.php">SOFA</a></li>
<li><a href="bookshelf.php">BOOKSHELF</a></li>
<ul>

鼠标悬停时，我想在 div #preview 中显示产品的缩略图。

我不想为每个图像硬编码 jquery。相反，我想编写 JQuery 来获取图像位置并插入到 DOM 中。我不知道如何标记 html 以包含图像位置。有什么想法吗？

【问题讨论】：

@您想在鼠标悬停时显示椅子鼠标悬停在椅子上，并在鼠标悬停时显示桌子图片？？

应该很简单，如果没有人回答你的问题，我会在我吃完饭后回复hmmm

@但请记住，您需要为每个 href 映射到图像或为每个对象存储一个带有图像路径的隐藏跨度

查看这篇文章-codegena.com/image-link-preview-on-hover

【参考方案1】：

我建议使用new HTML5 data attributes，像这样：

<a href="chair.php" data-thumbnail-src="chair.jpg">CHAIR</a>

然后你可以设置jQuery代码如下：

$(function () 
    var $preview = $("#preview");

    $("ul#products a").hover(function () 
        $preview.attr("src", $(this).attr("data-thumbnail-src"));
    , function () 
        $preview.attr("src", "");
    );
);

在 jQuery 1.4.3 及更高版本中，我相信$(this).data("thumbnail-src") 也可以工作。

【讨论】：

它不支持所有浏览器，因为它是 HTML5

其实HTML5是专门为向后兼容而设计的；自 Netscape 1.0 以来的所有浏览器都可以识别新的自定义属性。如果他尝试使用dataset DOM 属性，则在旧版浏览器中将无法使用；但是，使用 jQuery 的 attr 或 data 方法就可以了。

完美！谢谢你。我不知道自定义数据标签。我很想使用“rel”标签，但感觉不对。

【参考方案2】：

希望这是一个不错的解决方案。我正在使用JQuery Metadata plugin

这是直播内容：http://jsfiddle.net/giddygeek/VqL65/14/

HTML：

<script type="text/javascript" src="https://github.com/jquery/jquery-metadata/raw/master/jquery.metadata.js"></script>
<ul class="pics">
<li class="pic url:'chair.jpg'">
    <a href="chair.php">CHAIR</a></li>
<li class="pic url:'table.jpg'">
    <a href="table.php">TABLE</a></li>
<li>
    <a href="sofa.php">SOFA</a></li>
<li>
    <a href="bookshelf.php">BOOKSHELF</a></li>
<ul>
<div id="preview">
<img src="" />
<div/>

JQuery

$(document).ready(function()
    
       $("ul.pics li").hover(
           function()
           //on hover over
              var data = $(this).metadata();//get the metadata 
               if(data.url) //check if it exists
                   $("#preview img").attr("src",data.url)//set the url to it
               

           ,
           function()
           //on hover OUT
               $("#preview img").attr("src","");//set the img src to nothing
           
           );
    
);

注意事项：

Ive heard this is W3C compliant 并且可能与 Html5 兼容 请为每个名为 <li> 的 pic url:'something' 添加一个类。 将网址设置为您喜欢的图片。 在 JQuery 中，悬停将 img src 设置为空 -> ""。在这里，您应该将其设置为 NONE 图片或执行其他操作。 哦，download the metadata plugin（我使用了来自 github 的原始链接）

希望这会有所帮助。

【讨论】：

感谢您花时间回答。这绝对有效，但另一个答案的优点是不需要插件。 :)

@pole true。实际上，在回答时，我认为使用 HTML5 属性不会得到完全支持或会导致问题。后来我看到了这个帖子：***.com/questions/1355082/…

【参考方案3】：

它很旧，但我是通过谷歌搜索来到这里的。 我相信最好的解决方案是：http://james.padolsey.com/demos/imgPreview/full/

【讨论】：

很遗憾现在下载链接失效了。