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

I want to click on the seperate img and bind the div(aa to a, bb to b, cc to c, dd to d ) to show by only css

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

and infortunately it doesn't work, I didn't know what is wrong

40468300
  • 3
  • 1

1 Answers1

0

It's not entirely clear from your question what you want. But there are errors in your code.

  1. The + selector selects the element that comes immediately after the parent. You need to write the following:
<img src="" alt="" class="aa">
<div class="a">text</div>
<img src="" alt="" class="bb">
<div class="b">text</div>
  1. "a" is a class and its selector must start with a dot, like that: .a And you need to write the following:
.aa:hover + .a {
   display: block;
}
Aleksander
  • 23
  • 6
  • what if I can't change the format of HTML are there any solutions for this? – 40468300 Jan 12 '23 at 04:15
  • @40468300 Yes. The ~ selector. It selects all elements going after parent in yout case is should be .aa:hover ~ .a In details: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator – Aleksander Jan 12 '23 at 04:20