当另一个元素悬停时使一个元素可见

Question

我试图让文字在悬停在图像下方时显示在图像下方，但语法不正确。我开始学习 CSS，所以我可能没有遵循最佳实践，请指出如何更好地解决我的问题！

<div class="X">
    <span class="Y">
        <a href="XYZ">
            <span class="A"></span>
        </a>
        <span class="A-element">A</span>
    </span>
    <span class="Y">
        <a href="XYZ">
            <span class="B"></span>
        </a>
        <span class="B-element">B</span>
    </span>
</div>

我的 CSS 如下所示：

.X { 
  font-size: 5em;
}

.Y {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.A-element {
  display: none;
}

.B-element {
  display: none;
}

.A {
  color: #fff;
}

.B {
  color: #fff;
}

.A:hover .A-element {
    color: #ccc;
    display: block;
}

.B:hover .B-element {
    color: #ccc;
    display: block;
}

Answer 1

使用 CSS 无法将鼠标悬停在 .A 上更改 .A-element 的样式，因为要做到这一点，我们必须首先选择 .A 的父级，而 CSS 没有父级选择器。

然而，可以将鼠标悬停在.Y 元素内的a 元素上，然后使用+ adjacent sibling combinator 选择它旁边的元素：

.Y a:hover + span + span {
    color: #ccc;
    display: block;
}

如您所见，我根本不需要使用 .A-element 或 .B-element 类，因为这将适用于您的 .A-element 和 .B-element 元素。

---

简化代码片段

.Y a:hover + span {
  background: tomato;
  color: #fff;
  padding: 0 20px;
}

<div class="X">
    <span class="Y">
        <a href="XYZ">
            <span class="A">Hover here</span>
        </a>
        <span class="A-element">A</span>
    </span>
    <span class="Y">
        <a href="XYZ">
            <span class="B">Hover here</span>
        </a>
        <span class="B-element">B</span>
    </span>
</div>

Answer 2

您可以在父元素上使用鼠标悬停。例如

.Y:hover .A-element {
    color: #ccc;
    display: block;
}