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

Question

I need background color lightgreen on card hover.

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

styles

.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
    }
  }
}

Code inSandbox

Please help to make it work. Thanks

Answer 1

All you need to do is add hover to the class card. Eg:

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

Example:

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
    }
  }
}

Answer 2

Change your .card backgroundcolor to lightgreen

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

Code in Sandbox