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的样式是不可能的，因为要执行此操作，我们必须先选择.A的父级，并且CSS没有父选择器。

但是，有可能将鼠标悬停在a元素中的.Y元素上，并使用+ adjacent sibling combinator选择旁边的元素：

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

正如您所看到的，我根本不必使用.A-element或.B-element课程，因为这将适用于您的.A-element和.B-element元件。

简化代码片段

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你可以在父元素上使用悬停。例如

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

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

2 个答案:

简化代码片段