实现对前缀相同的多个同级类应用hover效果的CSS代码

你当前的.image_produit:hover img选择器无法生效，核心原因是它仅匹配**类名完全为image_produit**的元素，而你的目标元素类名是image_produit1、image_produit2这类带数字后缀的。

可以用CSS属性选择器来匹配所有前缀为image_produit的类，具体代码如下：

/* 保留你原有的每个产品类样式 */
.image_produit1 {
    background: url('Pic1.jpg') no-repeat;
    background-position: center;
    background-size: contain;
    top: 0px;
}
.image_produit2 {
    background: url('Pic2.jpg') no-repeat;
    background-position: center;
    background-size: contain;
    top: 0px;
}

/* 匹配所有以image_produit开头的类元素hover时，显示内部img */
[class^="image_produit"]:hover img {
    visibility: visible;
}

补充说明 #

如果你的元素同时存在多个类（例如 <div class="image_produit1 product-card">），[class^="image_produit"]可能因为类名不是开头第一个而失效，这时可以改用包含匹配的属性选择器：

[class*=" image_produit"]:hover img {
    visibility: visible;
}

（注意选择器里的空格，确保匹配的是独立的类名，而非其他类名的一部分）

内容的提问来源于stack exchange，提问作者Nicolas