How to change the style of the hovered element "and" some other element at the same time ,-CodePudding

I want to change style the hovered element and the style of an another element at the same time. I want to change the color of both elements.

.b1,
.b2 {
  width: 200px;
  height: 200px;
}

.b1 {
  background-color: aqua;
}

 .b2 {
  background-color: blueviolet;
}

.container:hover > .b1 {
  background-color: yellow;
}

<div class="container">
   <div class="b1"></div> /* hovered element*/
  <div class="b2"></div>
</div>

CodePudding user response：

Here is another idea that allow you to affect other elements without considering any specific selector and by only using the :hover state of the main element.

For this, I will rely on the use of custom properties (CSS variables). As we can read in the specification:

Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules ...

The idea is to define custom properties within the main element and use them to style child elements and since these properties are inherited we simply need to change them within the main element on hover.

Here is an example:

#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}

<div id="container">
  <div>
  </div>
</div>

Why this can be better than using specific selector combined with hover?

I can provide at least 2 reasons that make this method a good one to consider:

If we have many nested elements that share the same styles, this will avoid us complex selector to target all of them on hover. Using Custom properties, we simply change the value when hovering on the parent element. A custom property can be used to replace a value of any property and also a partial value of it. For example we can define a custom property for a color and we use it within a border, linear-gradient, background-color, box-shadow etc. This will avoid us reseting all these properties on hover.

Here is a more complex example:

    .container {
      --c:red;
      width:400px;
      display:flex;
      border:1px solid var(--c);
      justify-content:space-between;
      padding:5px;
      background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
    }
    .box {
      width:30%;
      background:var(--c);
      box-shadow:0px 0px 5px var(--c);
      position:relative;
    }
    .box:before {
      content:"A";
      display:block;
      width:15px;
      margin:0 auto;
      height:100%;
      color:var(--c);
      background:#fff;
    }
    
    /*Hover*/
    .

container:hover {
  --c:blue;
}

<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>

CodePudding user response：

You can simply add another element same way as this

.b1,
.b2 {
  width: 200px;
  height: 200px;
}

.b1 {
  background-color: aqua;
}

 .b2 {
  background-color: blueviolet;
}

.container:hover  > .b1 {
  background-color: yellow;
}
.container:hover  > .b2 {
  background-color: red;
}

<div class="container">
   <div class="b1"></div> /* hovered element*/
  <div class="b2"></div>
</div>

CodePudding user response：

If container is your hovered element and you want to change the background color of b1 and b2, try this:

.container:hover :is(.b1, .b2) {
  background-color: yellow;
}

jsfiddle

CodePudding user response：

The HTML structure is like Tree structure. so consider this you can change child element style when parent behavior change.

With this explantation, in CSS, you can't change sibling element style when another sibling behavior change but in JavaScript, it can be happen.