0

I am trying to do a developers' page in a website but I am encountering so problems. As you can see below I am trying to detect if a user is hovering on a certain card(.card) to 3d flip it.

I have realized that when it works, I would have called the .container before it, and if I don't it does't do anything.

I have tried doing: .container .card:hover .cardFlip { /code/ } but it also didn't work!

<div class="container">

    <!-- Joe's Card -->
    <div class="card" id="JoeGermany">
      <h2>Joe Germany</h2>
      <img src="JoeGermany.jpg" alt="Joe Germany" class="JoeImg">
    </div>

    <div class="cardFlip">
      <div class="left"></div>
    </div>
</div>

.container .card:hover {
  transform: perspective(500px) rotateY(0deg);
}

This works! BUT!!

.card:hover .cardFlip {
  transform: perspective(500px) rotateY(-30deg);
}

This does't work!!

Thank you for any help in advance! Please do not be too rough if I have missed a silly mistake because I am considered rather a beginner.

Joe Germany
  • 11
  • 1
  • 4

2 Answers2

2

.card:hover .cardFlip

doesn't work because .cardFlip is a sibling rather than a descendant element of .card.

To select .cardFlip, you need either:

  • .cardFlip
  • .container .cardFlip
  • .card:hover + .cardFlip

etc.

Rounin
  • 27,134
  • 9
  • 83
  • 108
1

.card:hover .cardFlip means select all elements with the class cardFlip that are descendants of elements with the class card but with your hierarchy, this isn't true since the cardFlip div is a sibling of the card div, not a descendant.

Use .card:hover + .cardFlip instead, where + is the adjacent sibling combinator.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • I see but one more question: I have 4 .cardFlip and when I tried you technique it only applied to one; so how can I fix it?? – Joe Germany Aug 20 '19 at 14:46
  • If all four cardFlips are siblings of the card, then use `~` instead of `+` – j08691 Aug 20 '19 at 14:51
  • And sorry if I m asking a lot of questions but if there was a list of .cardFlip before .card or #JoeGermany; how could I access them?? – Joe Germany Aug 20 '19 at 15:06
  • There's no previous selector in CSS so you couldn't do that without JavaScript or a different HTML structure – j08691 Aug 20 '19 at 15:20