CODEWITHSUNDEEP
css
kurtko
kurtko

Reputation: 2126

CSS: Hover on element inside div, change element style inside another div

I have two divs. I want to change style an element inside a div, when hover an element inside another div.

In the next example I want to show more when hover over h3

It's possible only with css?

See example:

.alpha {
 position:relative;
 background-color:red;
 width:100px;
 height:50px;
}

.alpha .more {
 position:absolute;
 top:40%;
 left:40%;
 display:none
}

.beta {}

.beta h3:hover + .alpha .more {
 display:block;
}
<div class="alpha">
 <span class="more">Hello</span>
</div>

<div class="beta">
 <h3>Make hover</h3>
</div>

Upvotes: 0

Views: 3262

Answers (1)

ssc-hrep3
ssc-hrep3

Reputation: 16069

You can only go to the immediately next sibling (with +) or to any next sibling (with ~). It is not possible to go up the HTML tree (to the parent). So it would be possible to go from a hover over .beta to a child of .alpha, if you switch the their position in the HTML DOM (.beta before .alpha). So, see this example:

.alpha {
  position:relative;
  background-color:red;
  width:100px;
  height:50px;
}

.alpha .more {
  position:absolute;
  top:40%;
  left:40%;
  display:none
}

.beta {}

.beta:hover + .alpha .more {
  display:block;
}
<div class="beta">
  <h3>Make hover</h3>
</div>

<div class="alpha">
  <span class="more">Hello</span>
</div>

Upvotes: 5

Related Questions