css - 图像在悬停时闪烁且未调整大小

Question

我在网格中有一个图像列，我将图像显示为 25px x 25px，以便它很好地适合行。

我在图像上添加了悬停，当鼠标悬停在图像上时，应该会从左侧偏移(确实如此)，然后图像应该会变大，以便您可以看得更清楚。

发生了两件事

1) 当我将鼠标悬停在图片上时，它会不断闪烁

2) 即使图像向左移动 100 像素，它也不会扩展到新的大小。

我不知道为什么会这样。

$(document).ready(function() {
  LoadCatalogsGrid();
});

var myData = [{
    "RoomName": "Room 1",
    "OptionImageFile": "a"
  },
  {
    "RoomName": "Room 2",
    "OptionImageFile": "b"
  }
];

function optionGridImage(url) {
  return "<div class='imageOptionsList'><a style='text-align:center;height:25px;width:25px;' href='" +
    GetCatalogImageLocation(url) +
    "'><img  src='" +
    GetCatalogImageLocation(url) +
    "' style='height:25px;width:25px;' alt=''/></a></div>";
}

function GetCatalogImageLocation(imageName) {
  if (imageName == "a") {
    return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
  } else {
    return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
  }
}

function LoadCatalogsGrid() {
  $("#Grid").empty();
  $("#Grid").kendoGrid({
    scrollable: true,
    selectable: "row",
    filterable: false,
    height: 700,
    columns: [{
        field: "RoomName",
        title: "Room Name",
        width: "120px",
        template: "<div >#=RoomName #</div>"
      },
      {
        field: "OptionImageFile",
        title: "Image",
        template: "#= optionGridImage(OptionImageFile) #",
        attributes: {
          style: "margin:0 auto;"
        },
        width: 50
      }
    ],
    dataSource: {
      data: myData
    },
    dataBound: function(e) {

    }
  });
}

.imageOptionsList:hover a {
  visibility: visible;
  width: 250px !important;
  height: 325px !important;
  margin-left: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>

<div id="Grid"></div>

** 片段编辑 **所以现在当我悬停时图像不再闪烁，但是当你将鼠标悬停在图像上时它会向左移动，它不应该停留在它的位置并且当悬停时显示更大的版本

Answer 1

给你:

$(document).ready(function() {
  LoadCatalogsGrid();
});

var myData = [{
    "RoomName": "Room 1",
    "OptionImageFile": "a"
  },
  {
    "RoomName": "Room 2",
    "OptionImageFile": "b"
  }
];

function optionGridImage(url) {
  url = GetCatalogImageLocation(url);
  return `
    <div class="imageOptionsList">
      <a style="background-image:url(${url})" href="${url}">
        <img src="${url}" alt="">
      </a>
    </div>
  `;
}

function GetCatalogImageLocation(imageName) {
  if (imageName == "a") {
    return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
  } else {
    return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
  }
}

function LoadCatalogsGrid() {
  $("#Grid").empty();
  $("#Grid").kendoGrid({
    scrollable: true,
    selectable: "row",
    filterable: false,
    height: 700,
    columns: [{
        field: "RoomName",
        title: "Room Name",
        width: "120px",
        template: "<div >#=RoomName #</div>"
      },
      {
        field: "OptionImageFile",
        title: "Image",
        template: "#= optionGridImage(OptionImageFile) #",
        attributes: {
          style: "margin:0 auto;"
        },
        width: 50
      }
    ],
    dataSource: {
      data: myData
    },
    dataBound: function(e) {

    }
  });
}

.k-grid td {
  overflow: visible !important
}

.imageOptionsList a {
  position: relative;
  display: inline-block;
  height: 25px;
  width: 25px;
  background-size: cover;
}

.imageOptionsList a img {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 0;
  height: 0;
  transition: .5s
}

.imageOptionsList a:hover {
  z-index: 1
}

.imageOptionsList a:hover img {
  width: 50vw;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>

<div id="Grid"></div>