html - 我如何更改两个项目而只将鼠标悬停在一个上

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%);
  }
}

标签： htmlcsshover

Answer 1

您也许可以使用 css 图像过滤器，如下所示：

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

这是一个在蓝色背景上显示 Kickstarter 徽标的 jsfiddle。

演示

或者您可以简单地使用：

img { 
  opacity: 0.7; 
} 

img:hover { 
  opacity: 1; 
}