Html 悬停框颜色和图像不透明度

我有一个图像和文字在它下面包装在一个“a”标签。将鼠标悬停在包含文本的白色框上会将框变为灰色。将鼠标悬停在图像上，会产生不透明度效果

当鼠标悬停在上方时，如何使长方体变灰和图像不透明度同时发生。目前，这些都是单独发生的。这不是一个大问题，但如果他们一起发生，看起来会更好

这是一张截图-

这是我的HTML

---

现在用编辑过的代码试试这个

.w3白色{
利润上限：-20px；
宽度：40%；
}
.w3容器：悬停img{
不透明度：0.5；
}
.w3容器：悬停.w3白色{
背景颜色：灰色；
}

---

由于您的代码片段与您提供的图像不同，因此我创建了一个简单的代码片段，用于更改图像的不透明度，并将边框颜色（如果您所指的是方框）更改为灰色

.wrapper{
高度：200px；
宽度：250px；
边框：3倍纯绿；
}
.包装器：悬停{
边框：3倍纯色灰色；
}
.wrapper:悬停img{
不透明度：0.5；
}

---

试试这个：

.w3第三{
边框：5px实心浅绿色；
显示：内联块；
位置：相对位置；
文本对齐：居中；
}
p{
保证金：0；
}
a{
颜色：#000；
文字装饰：无；
}
.w3第三个：悬停.w3白色{
背景颜色：灰色；
}
.w3第三个：悬停img{
不透明度：0.2；
}

---

尝试将图像和文本放在一个容器中，并添加简单的转换。检查下面的代码片段

.img容器{
宽度：250px；
边框：2件纯蓝；
}
.img容器p{
填充：10px0；
保证金：0；
过渡：所有0.5s缓解；
}
.img容器img{
过渡：所有0.5s缓解；
}
.img容器：悬停img{
不透明度：0.5；
}
.img容器：悬停p{
背景颜色：灰色；
}

add css code Alsoy您似乎忽略了“框变灰”部分，框颜色解释得更多您最好问OP，而不是我您好，我正在尝试让图像变不透明，同时让下面有文本的白色框变灰。忽略它周围的绿色框…这是页面的颜色背景。此时，如果你将鼠标悬停在上面，图像将变为不透明度，但框将保持白色，除非你将鼠标悬停在它上面……我希望两者同时完成各自的任务。