打开jQuery工具提示时，如何模糊背景？

我已经开始了这项工作（参见下面的JSFIDE），但不知道如何在工具提示弹出时使背景稍微模糊。这可能吗？或者我必须使用对话框来代替

---

我想试试。没有本地的“模糊”效果可用。

除了模糊，我尝试了稍微不同的方法

当出现工具提示时

• 打开

  ：我将添加背景色

• 关闭

  ：我将删除背景色

JQuery：

---

请参阅

我能够通过CSS过滤器实现此效果：

.blur {
    -webkit-filter: blur(1px);
    transition: all 0.5s ease;
}
.noblur {
    -webkit-filter: blur(0px);
    transition: all 1s ease;
}

以及toolip的open（）和close（）事件：

$(document).tooltip({
    open: function( event, ui ) {
        $("#poem").addClass("blur");
        $("#poem").removeClass("noblur");
    },
    close: function(event, ui) {
        $("#poem").removeClass("blur");
        $("#poem").addClass("noblur");
    }
});

---

谢天谢地，不管应用了什么CSS（例如，.blur），都不会应用到工具提示。参见JSFIDLE completed:

我想我已经接近了您想要的效果，在获取工具提示的链接中添加了

mouseenter

和

mouseleave

处理程序。当我悬停链接时，我会向文档中添加一个元素，该元素填充页面并具有CSS透明度。我将链接设置为

display:inline block

和

z-index:999

，以便它位于新元素的顶部。当我将鼠标从链接上移开时，我将

.detach（）

新元素

使用带有模糊半透明纹理的png背景，而不是新元素的颜色，可能会更接近所需效果

CSS: JavaScript:

$bgblur=$（“”）；
$（函数（）{
$（document.tooltip（）；
$（“a[标题]”）。关于（“鼠标指针”，函数（）{
$（this.css）({
“显示”：“内联块”，
“位置”：“相对”，
“z索引”：“999”
});
美元（本）。之前（$bgblur）；
});
$（“a[title]”。在（“mouseleave”上，函数（）{
$bgblur.detach（）；
});
});

.blur {
    -webkit-filter: blur(1px);
    transition: all 0.5s ease;
}
.noblur {
    -webkit-filter: blur(0px);
    transition: all 1s ease;
}

$(document).tooltip({
    open: function( event, ui ) {
        $("#poem").addClass("blur");
        $("#poem").removeClass("noblur");
    },
    close: function(event, ui) {
        $("#poem").removeClass("blur");
        $("#poem").addClass("noblur");
    }
});

.bgblur {
    position: absolute;
    z-index: 800;
    top: -1em;
    right: -1em;
    bottom: -1em;
    left: -1em;
    background-color: white;
    opacity: 0.8;
}

$bgblur = $("<div class='bgblur'>");
$(function () {
    $(document).tooltip();
    $("a[title]").on("mouseenter", function () {
        $(this).css({
            "display": "inline-block",
                "position": "relative",
                "z-index": "999"
        });
        $(this).before($bgblur);
    });
    $("a[title]").on("mouseleave", function () {
        $bgblur.detach();
    });
});