Question

我正在尝试为我们公司网站上的某些图片添加悬停功能。问题是我需要这个用于许多图片（产品图片），但不是全部（图标等），我需要非常简单的实现，因为内容将由对我的编程知之甚少的人处理。

我找到了一个非常简洁的解决方案

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

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

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

Answer 1

最好的方法是在您希望悬停效果的图片中添加自定义类，并使用此类更改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">

Answer 2

使用 HTML 更改图像大小和不透明度的简单示例：

<style> 
    img
    {
        opacity: 0.25;
    }

    img:hover
    {
        opacity: 1.0;
    }
    img.custom:hover,
    img.custom:focus 
    {
        transition: .2s;
        transform: scale(1.15);
    }
</style>

Answer 3

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

这是一个例子

＆＃13;

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

＆＃13;

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

＆＃13;

transition: 它让图片中的变换更柔和

transform scale: 而不是使用width和height，您可以使用此属性来增加图片的比例

:first-child 它仅适用于第一个子元素，如果第一个子元素是td标记，则表示元素是什么对任何元素都不做任何操作，您可以使用nth-of-type，nth-child或first-of-type

Answer 4

在html的类中提供您想要使用的图像，例如

1cm

然后在你的css中使用这个特定的类：

<img href="images/img.jpg"class="grow-big" alt="..">

在悬停时更改图片大小

4 个答案: