更改每张卡悬停时div的背景颜色/背景图像

Question

我有三个不同的卡，我想改变背景色各自的卡，我悬停在上面。我试过.card-2:hover #landing {background-color: blue;}，但那不起作用。我要整个身体的背景颜色都变了。就像这里，https://imgur.com/a/xEBiRIo 着陆屏

        <div id="landing">
            <div class="container d-flex justify-content-end align-items-center" style="height: 100vh !important;">
                <div class="row row-cols-1 row-cols-md-3 g-4">
                    <div class="col">
                      <div class="card card-1 h-100">
                        <div class="card-body">
                          <h5 class="card-title">Purple</h5>
                          <p class="card-text">Hover over me to see purple bg</p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card card-2 h-100">
                        <div class="card-body">
                          <h5 class="card-title">Blue</h5>
                          <p class="card-text">Hover over me to see blue bg</p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card card-3 h-100">
                        <div class="card-body">
                          <h5 class="card-title">Red</h5>
                          <p class="card-text">Hover over me to see red bg</p>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>

#landing {
    background-color: #202140;
    height: 100vh;
}

.card, .list-group-item {
  border-radius: 0px !important;
  font-family: 'text-main' !important;
  color: white !important;
  text-shadow: rgba(0, 0, 0, 0.336) 0px 0 10px;
  background-color: rgba(32, 33, 64, 0) !important;
  -webkit-backdrop-filter: blur(100px) !important;
  backdrop-filter: blur(100px) !important;
}

我正在使用引导v5.2和jQuery3.6.0

Answer 1

这里有两个问题。第一个问题是你的选择器。.card-2:hover #landing正在寻找.card-2中的一个#landing元素--这应该是另一种方法。

第二个问题是由于您使用了!important，:hover规则不够具体，无法覆盖默认样式。删除!important标志，并强烈考虑不再使用它们。它们是一种代码气味，表明CSS模式的思想很差。如果需要重写继承的样式，请使用更具体的选择器。

随着这些问题的解决，守则的作用是：

​

#landing {
  background-color: #202140;
  height: 100vh;
}

#landing .card,
.list-group-item {
  border-radius: 0px;
  font-family: 'text-main';
  color: white;
  text-shadow: rgba(0, 0, 0, 0.336) 0px 0 10px;
  background-color: rgba(32, 33, 64, 0);
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
}

#landing .card-1:hover  {
  color: purple;
}
#landing .card-2:hover  {
  color: blue;
}
#landing .card-3:hover  {
  color: red;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="landing">
  <div class="container d-flex justify-content-end align-items-center" style="height: 100vh !important;">
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <div class="col">
        <div class="card card-1 h-100">
          <div class="card-body">
            <h5 class="card-title">Purple</h5>
            <p class="card-text">Hover over me to see purple bg</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card card-2 h-100">
          <div class="card-body">
            <h5 class="card-title">Blue</h5>
            <p class="card-text">Hover over me to see blue bg</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card card-3 h-100">
          <div class="card-body">
            <h5 class="card-title">Red</h5>
            <p class="card-text">Hover over me to see red bg</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​

--更新--

在注释中说明在悬停#landing元素时要设置.card的背景色之后，需要在JS中这样做。这是因为#landing是.card的父元素，而CSS选择器不能影响父元素。

要做到这一点，您可以使用jQuery在悬停父#landing时更新父.card。注意，我使用公共的.card类作为选择器，并在每个元素的data中存储要在#landing上设置的颜色，从而使这个函数变干：

​

let $landing = $('#landing');
$('.card').hover(
  e => $landing.css('background-color', $(e.currentTarget).data('color')),  
  e => $landing.css('background-color', $landing.data('default-color')) 
)

#landing {
  background-color: #202140;
  height: 100vh;
}

#landing .card,
.list-group-item {
  border-radius: 0px;
  font-family: 'text-main';
  color: white;
  text-shadow: rgba(0, 0, 0, 0.336) 0px 0 10px;
  background-color: rgba(32, 33, 64, 0);
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="landing" data-default-color="#202140">
  <div class="container d-flex justify-content-end align-items-center" style="height: 100vh !important;">
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <div class="col">
        <div class="card card-1 h-100" data-color="purple">
          <div class="card-body">
            <h5 class="card-title">Purple</h5>
            <p class="card-text">Hover over me to see purple bg</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card card-2 h-100" data-color="blue">
          <div class="card-body">
            <h5 class="card-title">Blue</h5>
            <p class="card-text">Hover over me to see blue bg</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card card-3 h-100" data-color="red">
          <div class="card-body">
            <h5 class="card-title">Red</h5>
            <p class="card-text">Hover over me to see red bg</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​