当悬停另一个图元时，使该图元可见

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

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

然而，可以将鼠标悬停在.Y元素中的a元素上，并使用+相邻的同级组合子选择旁边的元素：

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