What is a creative way to make a background color change happen when hovering (with a unique twist)?

Question

What is a creative way to make a background color change happen when hovering (with a unique twist)?

Let's cut to the chase.

I have 4 elements named background-1, background-2, background-3, and background-4.

Upon landing on the page, I want Background-1 to have a "background-color: #D8D7D8;" while the other three should be "background-color: #FBFBFB;".

Then, whenever I hover over any background-x element, I want all of them to change to #FBFBFB except the one being hovered over, which should turn to #D8D7D8.

I'm sure this is easy for you, but it's a bit tricky for me haha.

This is how my CSS code looks like:

.background-1 :hover{
    background: #D8D7D8;
    transition: .3s ease-in-out;
}
.background-2 :hover{
    background: #D8D7D8;
    transition: .3s ease-in-out;
}
.background-3 :hover{
    background: #D8D7D8;
    transition: .3s ease-in-out;
}
.background-4 :hover{
    background: #D8D7D8;
    transition: .3s ease-in-out;
}

Check out how it looks like here: Imgur

Thank you in advance!

Milack

css

Answer 1

Answer №1

Assuming all four elements are siblings, one potential approach is outlined below.

For the default value of bg1, a JavaScript event handler has been proposed.

const divs = document.querySelectorAll('.bg');

function clearBgExcept(target) {
  divs.forEach(div => div.style.backgroundColor = div !== target ? "#FBFBFB" : "#D8D7D8");
}

function clearAllBg() {
  divs.forEach(div => div.style.backgroundColor = div.dataset.default ? "#D8D7D8" : "#F8F8F8" );
}
divs.forEach(el => el.addEventListener('mouseover', e => {
    clearBgExcept(e.target);
  }));
  
divs.forEach(el => el.addEventListener('mouseout', () => {
    clearAllBg();
  }));

.wrapper {
  min-width: 300px;
  min-height: 300px;
  margin: 0 auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.bg {
  background-color: #FBFBFB;
  border: 1px solid #CCC;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .3s ease-in-out;
}

.bg[data-default="true"], .bg:hover {
  background-color: #D8D7D8;
}

<div class="wrapper">
  <div class="bg" data-default="true">BG1</div>
  <div class="bg">BG2</div>
  <div class="bg">BG3</div>
  <div class="bg">BG4</div>
</div>

Answer 2

Assuming all four elements are siblings, one potential approach is outlined below.

For the default value of bg1, a JavaScript event handler has been proposed.

const divs = document.querySelectorAll('.bg');

function clearBgExcept(target) {
  divs.forEach(div => div.style.backgroundColor = div !== target ? "#FBFBFB" : "#D8D7D8");
}

function clearAllBg() {
  divs.forEach(div => div.style.backgroundColor = div.dataset.default ? "#D8D7D8" : "#F8F8F8" );
}
divs.forEach(el => el.addEventListener('mouseover', e => {
    clearBgExcept(e.target);
  }));
  
divs.forEach(el => el.addEventListener('mouseout', () => {
    clearAllBg();
  }));

.wrapper {
  min-width: 300px;
  min-height: 300px;
  margin: 0 auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.bg {
  background-color: #FBFBFB;
  border: 1px solid #CCC;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .3s ease-in-out;
}

.bg[data-default="true"], .bg:hover {
  background-color: #D8D7D8;
}

<div class="wrapper">
  <div class="bg" data-default="true">BG1</div>
  <div class="bg">BG2</div>
  <div class="bg">BG3</div>
  <div class="bg">BG4</div>
</div>

Answer 3

Answer №2

If your elements are siblings, you can achieve the desired effect without the need for Javascript:

.background-1,
.background-2,
.background-3,
.background-4 {
  background-color: #FBFBFB;
  padding: 2em;
}

.background-1 {
  background-color: #D8D7D8;
}

.background-1:hover {
  background: #D8D7D8;
  transition: .3s ease-in-out;
}

.background-2:hover {
  background: #D8D7D8;
  transition: .3s ease-in-out;
}

.background-3:hover {
  background: #D8D7D8;
  transition: .3s ease-in-out;
}

.background-4:hover {
  background: #D8D7D8;
  transition: .3s ease-in-out;
}

.column:hover .background-1:not(:hover) {
  background-color: #FBFBFB;
}

<div class="column">
  <div class="background-1">
    B1
  </div>
  <div class="background-2">
    B2
  </div>
  <div class="background-3">
    B3
  </div>
  <div class="background-4">
    B4
  </div>
</div>

The unique aspect of this approach is in resetting the color of background-1 when the parent element is hovered but background-1 itself is not being hovered.

Answer 4

If your elements are siblings, you can achieve the desired effect without the need for Javascript:

.background-1,
.background-2,
.background-3,
.background-4 {
  background-color: #FBFBFB;
  padding: 2em;
}

.background-1 {
  background-color: #D8D7D8;
}

.background-1:hover {
  background: #D8D7D8;
  transition: .3s ease-in-out;
}

.background-2:hover {
  background: #D8D7D8;
  transition: .3s ease-in-out;
}

.background-3:hover {
  background: #D8D7D8;
  transition: .3s ease-in-out;
}

.background-4:hover {
  background: #D8D7D8;
  transition: .3s ease-in-out;
}

.column:hover .background-1:not(:hover) {
  background-color: #FBFBFB;
}

<div class="column">
  <div class="background-1">
    B1
  </div>
  <div class="background-2">
    B2
  </div>
  <div class="background-3">
    B3
  </div>
  <div class="background-4">
    B4
  </div>
</div>

The unique aspect of this approach is in resetting the color of background-1 when the parent element is hovered but background-1 itself is not being hovered.

What is a creative way to make a background color change happen when hovering (with a unique twist)?

Answer №1

Answer №2

Similar questions

"Flooding the page with flex wrap is causing everything to

Using typefaces in mobile native apps

Adjustable columns that fill the rest of the screen's height below a navigation bar

Moving up stacked columns with bootstrap or any other CSS technique

How can I ensure that the NextJS Image component fills its parent div completely in terms of both height and width?

Prevented a frame from "https://googleads.g.doubleclick.net" from accessing another frame

Customize the overlay color using the theme's background color

Capture selected items from checkboxes and incorporate them into the CSS styling

Bootstrap Collapse feature fails to collapse on Twitter

Automatically resizing button on media query adjust

Learn how to display two rows of div elements within a single div container

Webpage created from scratch encounters technical difficulties on mobile device browser

How to Fix the Issue of CSS Font Face Path Not Working in Your Express Application

Images on the login page are not being displayed due to CSS urls not functioning properly

The behavior of -webkit-border-radius differs from that of -moz-border-radius

How can jQuery be utilized to dynamically update the text in a navbar?

When the height is set to 100vh, the Div and Image appear misaligned vertically

Encountering issues with implementing a sticky header feature for Primeng tables

I am encountering an issue where I am unable to access properties of null while trying to read the 'pulsate' function within the

Design a customized menu using a JavaScript JSON array