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

时间：2019-02-06 16:37:52

标签： css

我在网格中有一个图像列，并且将图像显示为25px x 25px，因此非常适合该行。

我在图像上添加了一个鼠标悬停，当鼠标悬停在图像上时，图像应该从左侧偏移（确实如此），然后图像应该变大，以便您可以更好地看到它。

正在发生2件事

1）当我将鼠标悬停在图片上时，它会连续闪烁

2）即使图像向左移动100px，也不会扩展为新尺寸。

我不知道为什么会这样。

$(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>

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

3 个答案:

答案 0 :(得分：0)

从悬停类中删除margin-left: 100px行。另外，尝试使用transform增加图像大小。下面的代码将使图像大小增加一倍。

.imageOptionsList:hover img {
   visibility: visible;
   transform: scale(2);
}

答案 1 :(得分：0)

您的帖子中有一些相互矛盾的信息。您提到左偏移量是正确的，然后说应该在末尾。

下面，我删除了图像上的内联样式，并将选择器更新为定位到img中的.imageOptionsList标签。我还添加了一个过渡，因此它不会造成困难，请随时删除。

$(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) +
    "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 img {
  width: 25px;
  height: 25px;
  transition: height 500ms ease-in-out, width 500ms ease-in-out;
}
.imageOptionsList img:hover {
  width: 250px;
  height: 325px;
}
<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>

答案 2 :(得分：0)

您在这里：

$(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>

相关问题
最新问题