如何在只悬停在一个项目上时更改两个项目

问题描述

我遇到了这个问题，但找不到任何相关信息问题是当我将鼠标悬停在卡片上时，我想让我的图像更亮我该怎么做？？

我的例子

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

解决方法

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

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

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

demo

或者你可以简单地使用：

img { 
  opacity: 0.7; 
} 

img:hover { 
  opacity: 1; 
}

如果图片标签在卡片标签内，您可以使用 > 选择器：

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

hover html