javascript - 在鼠标悬停/输入时将图像 src 和位置设置为鼠标

Question

我有一个正在动态构建的列表，并希望在鼠标进入/悬停相关列表项时显示图像。

OnmouseOver 似乎触发了多次并且 src 属性确实发生了变化，但图像没有显示在浏览器中。

这是我目前拥有的。

function showImage(e, src) {
    $("#imageContainer").css("left", e.pageX);
    $("#imageContainer").css("top", e.pageY);
    $("#imageContainer").show();
    $("#itemImage").attr("src", src);
}

function hideImage() {
    $("#imageContainer").hide();
    $("#itemImage").attr("src", "");
}

@foreach (var item in Model.items)
{
    string imageUrl = "test.com/images/"+ item.ImageName;

    <tr>
        <td>
            <a href="#" onmouseover="showImage(event, @imageUrl)" onmouseout="hideImage()">@item.Name</a>
        </td>
    </tr>
}

<div id="imageContainer" style="display: none; position: absolute;"> 
    <img class="itemImage" src="#" />
</div>

Answer 1

您正在为“itemImage”使用id 选择器，它实际上是一个类。您需要使用类选择器。

改变:

$("#itemImage").attr("src", src);
$("#itemImage").attr("src", "");

到

$(".itemImage").attr("src", src);
$(".itemImage").attr("src", "");