CODEWITHSUNDEEP
htmlcsshover
Michael Sherris Caley
Michael Sherris Caley

Reputation: 342

Selecting other elements on hover not behaving as expected

I've always in the past been able to write something like

.hero:hover .child {}

In order to have .child change when .hero is hovered. I understand I can use the + operator, but have never needed that in the past.

I have a codepen demonstrating the the problem here http://codepen.io/mikeCaley/pen/VpYrEq

You'll see at the bottom: 

.p1:hover .p2 {
  width: 60%;
}

but for reasons unknown it has no effect

Upvotes: 0

Views: 34

Answers (3)

Michael Sherris Caley
Michael Sherris Caley

Reputation: 342

Turns out the reason for my problems was initially I used a nested selector but then when trying to use the sibling selector ie '+' I did not know that can only select the immediate sibling and what I needed was the ~ symbol which is a general sibling selector

Upvotes: 0

neophyte
neophyte

Reputation: 6626

You talking about parent child relation for that the div should be nested one inside another.

I suppose you are talking about this .p1:hover > .p2

Take a look at the snippet

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.slider-wrap {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  font-size:0;
}

.placeholder {
  display: inline-block;
  height: 100%;
  width: 33.3%;
  background-color: black;
  background-size: cover;
  background-position: 41% 0px;
  background-repeat: no-repeat;
  transition: width 0.2s linear;
}

.p1 {
  background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_2_DNT?$retina$);
}

.p2 {
  background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_1_DNT?$retina$);
}

.p3 {
  background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_3_DNT?$retina$);
}

.p1:hover > .p2 {
  width: 60%;
}
<div class="slider-wrap">
  <div class="placeholder p1">
  <div class="placeholder p2"></div>
  <div class="placeholder p3"></div>
  </div>
</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67748

You need to change the selector, since .p1 and p2 are siblings (i.e. p2 is not a child of p1):

.p1:hover + .p2 {
  width: 60%;
}

http://codepen.io/anon/pen/mWypqV

Upvotes: 1

Related Questions