html - 为什么我在访问 html 和 css 中的类时遇到问题

Question

我正在尝试在网站上创建开发人员页面，但遇到了很多问题。正如您在下面看到的，我正在尝试检测用户是否将鼠标悬停在某个卡片（.card）上以对其进行 3d 翻转。

我已经意识到，当它起作用时，我会在它之前调用 .container ，如果我不这样做，它什么也做不了。

我试过做： .container .card:hover .cardFlip { / code / } 但它也没有用！

<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);
}

这行得通！但！！

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

这不行！！

感谢您提前提供任何帮助！如果我错过了一个愚蠢的错误，请不要太粗鲁，因为我被认为是一个初学者。

标签： htmlcss

Answer 1

.card:hover .cardFlip

不起作用，因为.cardFlip它是 的兄弟元素而不是.card.

要选择.cardFlip，您需要：

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

等等