鼠标悬停时调整图像大小一直在闪烁

Question

我有这个代码，每当我把鼠标放在表中的第一张图片上时，它都能正常工作，但当我把鼠标放到第二张图片上后，图片会放大但开始闪烁。目前，我只有两张来自数据库的图片，所以我不知道一旦数据库被填充，其他图片是否也会发生同样的事情。除此之外，其他一切似乎都很好。

<table id="datatable-fixed-header" class="table table-striped table-colored table-teal">
<thead>
<tr>
<th>
ID
</th>
<th>
Picture
</th>
<th>
ЕМБГ
</th>
<th>
Name
</th>
<th>
Occupation
</th>
<th>
Active
</th>
<th>
Commands
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.OrderByDescending(x => x.sysDateUpdated)) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.ID)
</td>
<td>
@{ var imageDataURL = ""; if (item.Image != null) { string imageBase64Data = Convert.ToBase64String(item.Image); imageDataURL = string.Format("data:image/jpeg;base64,{0}", imageBase64Data); }
<img src="@imageDataURL" class="thumb-md" border=0 onmouseover="show(this)" onmouseout="hide(this)" />
<div id="enlarge_images" style="position: absolute; "></div>
}

</td>
<td>
@Html.DisplayFor(modelItem => item.EMB)
</td>
<td>
@Html.DisplayFor(modelItem => item.FullName)
</td>
<td>
@{ var empInfo = item.PersonEmployments.FirstOrDefault(x => !x.DateFinish.HasValue); } @(empInfo != null ? empInfo.Occupation.Title : "n\a")
</td>
<td>
@Html.DisplayFor(modelItem => item.Active)
</td>
<td>
@if (!Tamacs.Client.Web.Properties.Settings.Default.PantheonIntegrated) {
<button title="Промени податоци" onclick="location.href='@Url.Action(" Edit ", "Person ", new{id=item.ID})'" class="btn btn-icon btn-xs waves-effect waves-light btn-orange"> <i class="fa fa-edit"></i> </button> }
<button title="Информации за работен однос" onclick="location.href='@Url.Action(" Index ", "Employment ", new{id=item.ID})'" clas class="btn btn-icon btn-xs waves-effect waves-light btn-default"> <i class="fa fa-suitcase"></i> </button> @if (item.Active)
{
<button title="Преглед листа на картички" onclick="location.href='@Url.Action(" PersonCardsList ", "Person ", new{personId=item.ID})'" class="btn btn-icon btn-xs waves-effect waves-light btn-default"> <i class="fa fa-list"></i> </button> }
</td>
</tr>
}
</tbody>
</table>
<script>
function show(_this) {
document.getElementById("enlarge_images").innerHTML = "<img src='" + _this.src + "'+'width=350 height=120' >";
}
function hide(_this) {
document.getElementById("enlarge_images").innerHTML = "";
}
</script>

Answer 1

您面临的问题是，当显示enlarge_imagesdiv时，div将覆盖导致调用图像的鼠标输出事件的主图像，还因为您创建了多个具有相同id的div(在HTML中，您必须创建唯一id(。请注意，当您使用position absolute时，div的位置与具有相对值的位置的最近父元素有关。我建议您应该从主图像中删除鼠标移出事件，并将其添加到放大图像标签(而不是div(

更改功能

function show(_this,_div)
{
_div.innerHTML 
= "<img src='" + _this.src + "'+'width=350 height=120'"
+ " onmouseout="hide(this," _div.id + ")" />";
}
function hide(_this,_div)
{
_div.innerHTML = "";
}

更改HTML

var enlargeId = "enlarge_images" + i;
<img src="https://sep.ir//Data/Sites/1/media/icons/toolbar/724.png" style="width:25px;" class= "thumb-md" border = 0 onmouseover="show(this,document.getElementById('@enlargeId')" />
<div id="@enlargeId" style="position: absolute; "></div>