Change background-color/background-image of div on hover of each cards

user_18799034 0
Viewed 49

I have three different cards, I want to change the background color respective the card I hover on. I have tried .card-2:hover #landing {background-color: blue;} but that doesn't work. I want the entire body's background-color changed. Like here https://imgur.com/a/xEBiRIo Landing screen

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

I am using bootstrap v5.2 and jquery 3.6.0

css html jquery
1 Answers

There's two issues here. The first problem is your selector. .card-2:hover #landing is looking for a #landing element inside .card-2 - this should be the other way around.

The second problem is due to your use of !important the :hover rule isn't specific enough to override the default styling. Remove the !important flag, and strongly consider never using them again. They are a code smell indicative of a poorly thought through CSS pattern. If you need to override an inherited style, use a more specific selector instead.

With those issues addressed, the code works:

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

-- Update --

Following the clarification in the comments that you want to set the background-color of #landing when hovering the .card elements, then this needs to be done in JS. This is because #landing is a parent element of the .card, and CSS selectors cannot affect parent elements.

To do this you can use jQuery to update the parent #landing when the .card is hovered. Note that I made this function DRY by using the common .card class as the selector and storing the colour to be set on #landing in the data of each element:

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>

user_5194130
Related