时间戳

首页 > 解决方案 > Jquery - 在输入悬停时显示 div

jquery - Jquery - 在输入悬停时显示 div

问题描述

我正在尝试制作一个不需要任何 3rd 方代码的工具提示。我想用 jQuery & CSS 来做。它需要支持新行，并且仅在将鼠标悬停在输入元素上时显示。

如果可能，我不想向 HTML 页面添加额外的代码或向输入字段添加标题。

我创建了一个包含要显示的文本的对象，活动对象还将包含其他值。

tooltip = {
    'sitea':    { 'tip': 'Site A Hover' },
    'siteb':    { 'tip': 'Site A Hover' },
    'sitec':    { 'tip': 'Site A Hover' }
}

当我将鼠标悬停在输入上时，我想要一个 div 来显示来自对象的文本。到目前为止，我已经让悬停工作，但我不知道如何做 div 并仅在悬停时显示它。

$(":input").hover( function() {
    $(this).css('cursor','pointer')
    }, function() {
        $(this).css('cursor','auto');
    })

我发现了这个FIDDLE，它似乎可以工作td，有没有办法用它来显示输入？

谢谢

标签： jqueryhover

解决方案

试试这个：

将此添加到您的 css 文件中。

div:hover > .div-to-display {
    display: block
}

将此添加到 javascript 文件中：

$('div').append('<div class="div-to-display">yay</div>');

添加要在其上显示工具提示的新 div 标签。

<div>newly added div tag (hover to diplay tooltip </div>

当然，您可以根据需要添加 css 和更改工具提示。

推荐阅读