鼠标悬停的弹出信息窗口

Question

我想在鼠标悬停时实现弹出窗口，以显示显示有关所述条目的所有信息的基本缩略图。

以下是我的索引视图：

当鼠标悬停在任何软件名称上时，我想要显示的缩略图窗口。

任何帮助表示感谢，提前谢谢！

Answer 1

您可以做的是使用JQuery遍历所有<tr> </tr>并附加一个html元素，您可以在其中添加缩略图。类似的东西：

 $('#table tr').each(function (i, obj) {
        $(obj).mouseenter(function () {
            $('body').append("<div id='hoveringTooltip' style='position:fixed;'></div>");
            $('#hoveringTooltip').html("your thumbnail");
            $('#hoveringTooltip').css({
                "top": (obj.getBoundingClientRect().top + 20),
                "left": obj.getBoundingClientRect().left,
                "background-color": "white",
                "border": "1px solid black"
            });
        });
        $(obj).mouseleave(function () {
            $('#hoveringTooltip').remove();
        });
    })

正如您所看到的，我将一些css应用于div，以便在鼠标位置附近显示它。

Answer 2

假设弹出窗口是＆＃34;描述框＆＃34;：

的ID

<强> HTML

<div id="parent">
This is the main container.
<div id="popup" style="display: none">some text here</div>
</div>

<强>的JavaScript

var e = document.getElementById('parent');
e.onmouseover = function() {
  document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
  document.getElementById('popup').style.display = 'none';
}

或者你可以完全摆脱JavaScript，只使用CSS：

<强> CSS

.parent .popup {
  display: none;
}

.parent:hover .popup {
  display: block;
}