使用 sass 更改悬停的卡片背景颜色答案

【问题标题】：Change hovered card background color using sass使用 sass 更改悬停的卡片背景颜色
【发布时间】：2020-11-07 18:46:49
【问题描述】：

我需要卡片悬停时的背景颜色lightgreen。

    <div class="card">
      <img src="https://placekitten.com/200/300" 
alt="card-theme"/>
      <div class="hovered-text">
        Open
      </div>
    </div>

样式

.card {
  background: white;
  width: 200px;
  height: 200px;
  position: relative;
  border: 5px solid lightgrey;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  .hovered-text {
    display: none;
    position: absolute;
    color: salmon;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    &:hover {
     opacity: 0.1;
     background: lightgreen;
    }
    &:hover~.hovered-text{
      display: block
    }
  }
}

Sandbox中的代码

请帮助使其工作。谢谢

【问题讨论】：

&:hover { on .card 不工作....或者？因为我看到你在img 上使用它，所以你知道它
@MihaiT 试过但没用
嗯，它似乎正在工作。 codesandbox.io/s/hover-card-forked-wtihx?file=/src/styles.scss 。如果在您的项目中它不起作用，那么您可能有错字或未关闭的{} 或覆盖您的悬停样式的东西。请做进一步调试
好吧。第一次遇到什么问题？因为你说它不起作用

标签： html css reactjs sass

【解决方案1】：

您需要做的就是将悬停添加到班级卡片。例如：

.card {
  &:hover {
    background: lightgreen;
   }

例子：

card {
  background: white;
  width: 200px;
  height: 200px;
  position: relative;
  border: 5px solid lightgrey;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
&:hover {
        background: lightgreen;
       }
  .hovered-text {
    display: none;
    position: absolute;
    color: salmon;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    &:hover {
     opacity: 0.1;
     background: lightgreen;
    }
    &:hover~.hovered-text{
      display: block
    }
  }
}

【讨论】：

【解决方案2】：

将您的 .card 背景颜色更改为浅绿色

.App {
  font-family: sans-serif;
  text-align: center;
}

.card {
  background: lightgreen;
  width: 200px;
  height: 200px;
  position: relative;
  border: 5px solid lightgrey;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  .hovered-text {
    display: none;
    position: absolute;
    color: salmon;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    &:hover, ::after {
     opacity: 0.3;
    //  background: #lightgreen;
    }
    &:hover~.hovered-text{
      display: block;
      
    }
  }
}

Sandbox中的代码

【讨论】：