Javascript jQuery：如何添加div来覆盖鼠标所覆盖的元素？

我想添加一个div来覆盖鼠标悬停在网页中的元素。我试了以下方法，但失败了。我怎么做？谢谢

  jQuery(function ($) {

    $("*").bind("mouseenter.noteEvent", function (event) {

    var offset = $(this).offset();
    var enterBg = "<div id = 'tooltip_enterbg'></div>";
    $("body").append(enterBg);
    $("#tooltip_enterbg")
        .css({
                "top": offset.top + "px",
                "left": offset.left + "px",
                "width": $(this).width(),
                "height": $(this).height(),
                "opacity": 0.5,
                "background-color": "#FFFF00"}
        );

    });

    $("*").bind("mouseleave.noteEvent", function (event) {
       $("#tooltip_enterbg").remove();
    });

});

jQuery（函数（$）{
$（“*”）.bind（“mouseenter.noteEvent”，函数（事件）{
var offset=$（this.offset（）；
var enterBg=“”；
$（“正文”）。追加（enterBg）；
$（“#工具提示_enterbg”）
.css({
“顶部”：offset.top+“px”，
“左”：offset.left+“px”，
“宽度”：$（this）.width（），
“高度”：$（this）.height（），
“不透明度”：0.5，
“背景色”：“#FFFF00”}
);
});
$（“*”）.bind（“mouseleave.noteEvent”，函数（事件）{
$（“#工具提示_enterbg”）.remove（）；
});
});

---

在这个演示中，当鼠标移动到“AAA”时，整个页面变为浅黄色，我只希望“AAA”变为浅黄色

您遗漏的位是

位置：绝对值，例如：

$("#tooltip_enterbg")
    .css({
            "top": offset.top + "px",
            "left": offset.left + "px",
            "width": $(this).width(),
            "height": $(this).height(),
            "opacity": 0.5,
            "background-color": "#FFFF00",
            "position": "absolute"}     // <===== Here
    );

$（“#工具提示_enterbg”）
.css({
“顶部”：offset.top+“px”，
“左”：offset.left+“px”，
“宽度”：$（this）.width（），
“高度”：$（this）.height（），
“不透明度”：0.5，
“背景色”：“FFFF00”，
“位置”：“绝对”}/使用以下代码：

jQuery(function ($) {

    $("p").bind("mouseenter.noteEvent", function (event) {

    var offset = $(this).offset();
    var enterBg = "<div id = 'tooltip_enterbg'></div>";
    $("body").append(enterBg);
    $("#tooltip_enterbg")
        .css({
                "top": offset.top + "px",
                "left": offset.left + "px",
                "width": $(this).width(),
                "height": $(this).height(),
                "opacity": 0.5,
                "background-color": "#FFFF00",
                "position": "fixed"}
        );
    });

    $("p").bind("mouseleave.noteEvent", function (event) {
       $("#tooltip_enterbg").remove();
    });
});

jQuery（函数（$）{
$（“p”）.bind（“mouseenter.noteEvent”，函数（事件）{
var offset=$（this.offset（）；
var enterBg=“”；
$（“正文”）。追加（enterBg）；
$（“#工具提示_enterbg”）
.css({
“顶部”：offset.top+“px”，
“左”：offset.left+“px”，
“宽度”：$（this）.width（），
“高度”：$（this）.height（），
“不透明度”：0.5，
“背景色”：“FFFF00”，
“位置”：“固定”}
);
});
$（“p”）.bind（“mouseleave.noteEvent”，函数（事件）{
$（“#工具提示_enterbg”）.remove（）；
});
});

演示在这里：
我尝试了
“位置”：“绝对”
，但他的影响是整个页面都变亮了。哦，我只想让div覆盖一小部分。@tao4yu：你需要
定位：绝对
，才能定位div。如果它不是你想要的位置，你需要在开发工具中查看它的指标，找出为什么它不是你想要的位置，但那部分不是optiAON.EngNote：您将这些事件处理程序挂钩到很多元素。您可以考虑事件委派——<代码> $（“正文”）。（“鼠标器”、“*”、“函数”）{…}；< /代码>
var enterBg = $("<div id = 'tooltip_enterbg'></div>");
$("body").append(enterBg);
enterBg
    .css/*...*/

jQuery(function ($) {

    $("p").bind("mouseenter.noteEvent", function (event) {

    var offset = $(this).offset();
    var enterBg = "<div id = 'tooltip_enterbg'></div>";
    $("body").append(enterBg);
    $("#tooltip_enterbg")
        .css({
                "top": offset.top + "px",
                "left": offset.left + "px",
                "width": $(this).width(),
                "height": $(this).height(),
                "opacity": 0.5,
                "background-color": "#FFFF00",
                "position": "fixed"}
        );
    });

    $("p").bind("mouseleave.noteEvent", function (event) {
       $("#tooltip_enterbg").remove();
    });
});