CODEWITHSUNDEEP
css
Timo Kuijpers
Timo Kuijpers

Reputation: 11

Stuck with CSS for hover effect that I want to apply on another element

I'm working on this pricing page where I want to display three different services that customers can order. I'm using blocks to display the prices. There is a center block that's bigger than the blocks on the left and right. When someone hovers over the left block, it grows while the center block shrinks.

I'm trying to do the same for the block on the right. It grows when I hover over it, but the center block is not shrinking.

You can see in the code that I'm using the ~ selector. This selector does not seem to target the center block when I hover over the block on the right. Can anyone tell me how I can make this work? Which selector should I use?

This part is not working: **.elementor-element-f6e3c46:hover ~ .elementor-element-42b670a**

ps. I'm using Elementor on WordPress for this, but I'm using my own CSS for styling.

.elementor-element-42b670a {
    box-shadow: 5px 5px 15px #888888; }

.elementor-3432 .elementor-element .elementor-element-cc7dfef > .elementor-element-populated:hover  {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 0px;
    box-shadow: 5px 5px 15px #888888;
    transition: 0.3s;
}

.elementor-3432 .elementor-element .elementor-element-f6e3c46 > .elementor-element-populated:hover  {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 0px;
    box-shadow: 5px 5px 15px #888888;
    transition: 0.3s;
}

.elementor-element-cc7dfef:hover ~ .elementor-element-42b670a {
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: 16px;
    transition: 0.3s;
    box-shadow: 0px 0px 0px #888888;
}

.elementor-element-f6e3c46:hover ~ .elementor-element-42b670a {
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: 16px;
    transition: 0.3s;
    box-shadow: 0px 0px 0px #888888;
}

Upvotes: 0

Views: 393

Answers (1)

Jean Will
Jean Will

Reputation: 553

The ~ selector can only target next siblings, not previous ones.

An idea to counter that is to use the order property. There is an example:

.container {
  display: flex;
}

.product {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.product:nth-child(2) {
  order: 1;
}
.product:hover {
  background: red;
}

.main {
  background: red;
}
.product:hover ~ .main {
  background: white;
}
<div class="container">
  <div class="product"></div>
  <div class="product"></div>
  <div class="product main"></div>
</div>

Upvotes: 1

Related Questions