Javascript 在鼠标上方显示图像（在JSFIDLE的工作示例中）

我发现这把小提琴，如果我用class

lochtonialcass

将鼠标悬停在元素上，就会出现图像

lochtonialcass.png

---

如何更改此脚本以显示具有classname的任何元素的图像（classname.png），但如果没有图像

classname.png

如果我复制它并只更改类名，这是可行的，但如何将其连接在一起：

$（文档）.ready（函数（）{
var yOff=15；
var xOff=-20；
var pathToImage=”http://x.jupe.pl/lochtonialcaress.png";
$（“.lochtonialcass”）.hover（函数（e）{
$（“body”）.append（
）；
$（“#悬停文本时的图像”）
.css（“位置”、“绝对”）
.css（“顶部”（e.pageY-yOff）+“px”）
.css（“左”（e.pageX+xOff）+“px”）
.fadeIn（“快速”）；
},
函数（）{
$（“#悬停文本时的图像”）.remove（）；
});
$（“.lochtonialcass”）.mousemove（函数（e）{
$（“#悬停文本时的图像”）
.css（“顶部”（e.pageY-yOff）+“px”）
.css（“左”（e.pageX+xOff）+“px”）；
});
});
$（文档）.ready（函数（）{
var yOff=15；
var xOff=-20；
var pathToImage=”http://x.jupe.pl/vollsprotector.png";
$（“.vollsprotector”）.hover（函数（e）{
$（“body”）.append（
）；
$（“#悬停文本时的图像”）
.css（“位置”、“绝对”）
.css（“顶部”（e.pageY-yOff）+“px”）
.css（“左”（e.pageX+xOff）+“px”）
.fadeIn（“快速”）；
},
函数（）{
$（“#悬停文本时的图像”）.remove（）；
});
$（“.vollsprotector”）.mousemove（函数（e）{
$（“#悬停文本时的图像”）
.css（“顶部”（e.pageY-yOff）+“px”）
.css（“左”（e.pageX+xOff）+“px”）；
});
});

这是我的段落，对链接有影响

在临时受邀的劳动和生活中，所有人都必须遵守法律。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的

悬停适用于具有“文本悬停图像”类的每个元素。
您将在中找到一个工作示例。
只需添加一个
if
语句即可

$(".lochtonialcaress").hover(function (e) {
    if (pathToImage) {
    $("body").append("<p id='image-when-hovering-text'><img src='" + pathToImage + "'/></p>");
    $("#image-when-hovering-text")
        .css("position", "absolute")
        .css("top", (e.pageY - yOff) + "px")
        .css("left", (e.pageX + xOff) + "px")
        .fadeIn("fast");
    }
},

$（“.lochtonialcass”）.hover（函数（e）{
如果（路径图像）{
$（“body”）.append（
）；
$（“#悬停文本时的图像”）
.css（“位置”、“绝对”）
.css（“顶部”（e.pageY-yOff）+“px”）
.css（“左”（e.pageX+xOff）+“px”）
.fadeIn（“快速”）；
}
},

而不是：

$(".lochtonialcaress").hover(function (e) {
    $("body").append("<p id='image-when-hovering-text'><img src='" + pathToImage + "'/></p>");
    $("#image-when-hovering-text")
        .css("position", "absolute")
        .css("top", (e.pageY - yOff) + "px")
        .css("left", (e.pageX + xOff) + "px")
        .fadeIn("fast");
},

$（“.lochtonialcass”）.hover（函数（e）{
$（“body”）.append（
）；
$（“#悬停文本时的图像”）
.css（“位置”、“绝对”）
.css（“顶部”（e.pageY-yOff）+“px”）
.css（“左”（e.pageX+xOff）+“px”）
.fadeIn（“快速”）；
},
欢迎来到SO。到目前为止您尝试了什么？@haxxxton我尝试在没有jquery的情况下使用它，但后来我发现这个JSFIDLE和它几乎是我所需要的，但我对jquery一无所知，我对javascript的了解也不太令人印象深刻，我不知道如何对这个jquery示例进行点评：（@Florian this change nothig？我可能需要知道如何使用clasname赋予此函数参数，并检查是否存在具有给定类名的文件“如何更改此脚本以显示具有类名的任何元素的图像（classname.png），但如果没有图像classname.png，则什么也不显示”在我的例子中，如果pathToImage为null，我不会显示图像。就像你在问题中问的那样，不是吗？