css 悬停图像并在旁边显示文本[复制]

roejwanj 于 2023-01-14 发布在其他

关注(0)|答案(2)|浏览(143)

- 此问题在此处已有答案**：

What does the "~" (tilde/squiggle/twiddle) CSS selector mean?（3个答案）
（9个答案）
How to affect other elements when one element is hovered（9个答案）
2天前关闭.

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

我想单击单独的img并绑定div（aa到a、bb到b、cc到c、dd到d），以便仅按css显示

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

不幸的是它不起作用，我不知道出了什么问题

css

来源：https://stackoverflow.com/questions/75091357/hover-image-and-show-the-text-beside

2条答案

按热度按时间

3mpgtkmj1#

从你的问题中并不完全清楚你想要什么。但是你的代码中有错误。
1.+选择器选择紧随父元素之后的元素。您需要编写以下代码：

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

1.“a”是一个类，它的选择器必须以点开头，如下所示：.a您需要编写以下内容：

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

赞(0）回复(0）举报 2023-01-14

z3yyvxxp2#

使用CSS选择器：target并执行以下操作，

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


   #a,#b,#c,#d {
      display: none;
    }
    #aa:target ~ #a, #bb:target ~ #b, #cc:target ~ #c, #dd:target ~ #d {
      display: block;
    }

赞(0）回复(0）举报 2023-01-14

我来回答

css 悬停图像并在旁边显示文本[复制]

2条答案

相关问题

热门标签

最新问答