我如何改变两个项目，而只悬停在一个

Question

我有这个问题，我找不到任何关于它的东西问题是，当我将鼠标悬停在卡片上时，我想让图像更亮我该怎么做??

我的示例

.card-img {
border-radius: 4px;
align-items: center;
justify-content: center;
max-width: 340px;
display: block;
margin-left: auto;
margin-right: auto;
filter: brightness(70%);
-webkit-box-shadow: 0px 16px 30px -14px #000000;
box-shadow: 0px 16px 30px -14px #000000;
}
.card:hover {
transform: scale(1.04);
transition: all ease-in-out 0.5s;
background: #222329;
.card-img{
filter: brightness(1000%);
}
}

Answer 1

您可以使用css图像过滤器，像这样:

img:hover {-webkit-filter: brightness(150%); }

这是一个蓝色背景的Kickstarter logo。

演示或者你可以简单地使用:

img { 
opacity: 0.7; 
} 
img:hover { 
opacity: 1; 
}

Answer 2

如果Image标签在card标签内，可以使用>选择器:

.card-img {
border-radius: 4px;
align-items: center;
justify-content: center;
max-width: 340px;
display: block;
margin-left: auto;
margin-right: auto;
filter: brightness(70%);
-webkit-box-shadow: 0px 16px 30px -14px #000000;
box-shadow: 0px 16px 30px -14px #000000;
}
.card:hover {
transform: scale(1.04);
transition: all ease-in-out 0.5s;
background: #222329;

}
.card:hover > .card-img { /* select every card-image inside an hover card */
filter: brightness(1000%);
}