悬停图像并在旁边显示文本

Question

<img src="" alt="" class="aa">
<img src="" alt="" class="bb">
<img src="" alt="" class="cc">
<img src="" alt="" class="dd">
<div class="a">text</div>
<div class="b">text</div>
<div class="c">text</div>
<div class="d">text</div>

我想点击单独的图片并绑定div(aa到a, bb到b, cc到c, dd到d)，只显示css

.a {
display: none;
}
.aa:hover + a {
display: block;
}

，不幸的是它不起作用，我不知道哪里出错了

Answer 1

从你的问题中并不完全清楚你想要什么。但是你的代码有错误

1. +选择器选择紧跟在父元素之后的元素。您需要编写以下内容:

<img src="" alt="" class="aa">
<div class="a">text</div>
<img src="" alt="" class="bb">
<div class="b">text</div>

"a"是一个类，它的选择器必须以点开始，就像这样:。a你需要写下面的代码:

.aa:hover + .a {
display: block;
}