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

您面临的问题是，当显示expand_images div时，div将覆盖导致调用图像的鼠标移出事件的主图像，并且还因为您创建了多个具有相同id的div（在HTML中，您必须创建唯一的id ）。并且请注意，当您使用绝对位置时，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>

鼠标悬停时调整图像大小不断闪烁

1 个答案: