javascript - 当鼠标移动到带有jquery的文本上时显示图片？

Question

您知道当鼠标移动到 html 文本上时显示图片的教程或脚本吗？

Answer 1

使用 jQuery 的基本示例如下所示:

CSS

#myImage {
    display:none;
}​

HTML

<span class='pictureTrigger'>some text</span>

<img id='myImage' src='/path/to/image' />​

jQuery

$(function() {  // Makes sure DOM loads before code is run

    $('.pictureTrigger').hover(   // Assign event handlers for mouseenter/mouseleave

        function() { $('#myImage').show(); },  // Find myImage and show it on mouseenter
        function() { $('#myImage').hide(); }   // Find myImage and hide it on mouseleave
    );

});

如果问题没有更多细节，很难给出更好的答案。

基本思想是文本包含在 span 中，其中有一个名为 pictureTrigger 的类。不过，可以命名为任何名称。

悬停事件(实际上是两个事件的简写，mouseenter 和 mouseleave)被添加到具有 pictureTrigger 类的所有元素中。

这两个函数分别代表mouseenter和mouseleave事件。事件处理函数查找 ID 为 myImage 的 img，并显示/隐藏它。

<小时/>

相关 jQuery 文档:

• .show() - http://api.jquery.com/show/
• .hide() - http://api.jquery.com/hide/
• .hover() - http://api.jquery.com/hover/