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

您正在使用id选择器进行＆＃39; itemImage＆＃39;实际上是class。你需要使用类选择器。

更改：

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

到

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

Answer 2

在分配src属性后删除display:none position: absolute。

使用它：

$("#itemImage").removeAttr("style");

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

2 个答案: