悬停时更改图像大小

Question

我正在尝试为我们公司网站上的某些图像添加悬停功能。问题是我需要很多图片（产品图片）而不是所有图片（图标等），我需要非常简单的实现，因为内容将由比我更了解编程的人处理。

我找到了一个非常巧妙的解决方案

img:hover,
img:focus{
  width:192px;
  height: 136px;
}

但这（当然）为所有图像添加了悬停功能，包括 PDF 图标等。有没有一种简单的方法可以指定哪些图像（表格的第一列）有悬停选项？因为这个解决方案会很棒，因为营销人员可以像过去那样简单地实施产品。

或者也许还有其他易于使用的解决方案？

Answer 1

有没有一种简单的方法可以指定哪些图像（表格的第一列）有悬停选项？

这是一个例子

tr td:first-child img{
  transition: .2s;
}
tr td:first-child img:hover{
  transform: scale(1.1);
}

<table>
  <tr>
    <td><img src="http://via.placeholder.com/50x50"></td>
    <td><img src="http://via.placeholder.com/100x50"></td>
  </tr>
  <tr>
    <td><img src="http://via.placeholder.com/50x50"></td>
    <td><img src="http://via.placeholder.com/100x50"></td>
  </tr>
</table>

过渡：它让图像中的变换更柔和

变换比例：而不是使用width，height您可以使用此属性来增加图像的比例

:first-child它只应用于第一个子元素，不管是什么元素，如果第一个子元素是一个td标签，它不会对任何元素做任何事情，你可以使用nth-of-type , nth-儿童或第一类

Answer 2

最好的方法是向您想要悬停效果的图像添加自定义类，并使用此类来更改 css

img.custom:hover,
img.custom:focus {
  width: 192px;
  height: 136px;
}

<img class="custom" src="http://via.placeholder.com/50x50"><br>
<img src="http://via.placeholder.com/50x50"><br>
<img src="http://via.placeholder.com/50x50">