How to use tilde in css correctly in structure?

user_8945207 0
Viewed 1323

I have the following issue.
In a demo part I have the code below: 

<style>    
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }

.text.prijsa:hover ~ .manImgA { display: block; }
.text.prijsb:hover ~ .manImgB { display: block; }
.text.prijsc:hover ~ .manImgC { display: block; }
</style>

  <div class="manImgA">
   <img src="url-to-image-1">
  </div>

  <div class="manImgB">
   <img src="url-to-image-2">
  </div>

  <div class="manImgC">
   <img src="url-to-image-3">
  </div>

  <p class="text prijsa">Standard size</p>
  <p class="text prijsb">Big size</p>
  <p class="text prijsc">Very big size</p>

When you move the mouse cursor over one of the text paragraphs an image should appear. That will work if I replace the paragraphs above the code with the images.

But when I put in the structure like I showed above it doesn't work.
I tried to find answer online why it doesn't work... I post my question here because I didn't fine a clear answer.

css-selectors css html
3 Answers

Maybe this is what you are looking for?

Anyway siblings selector is for element that come after not before.

.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }

.text.prijsa:hover ~ .manImgA { display: block; }
.text.prijsb:hover ~ .manImgB { display: block; }
.text.prijsc:hover ~ .manImgC { display: block; }
<p class="text prijsa">Standard size</p>
<p class="text prijsb">Big size</p>
<p class="text prijsc">Very big size</p> 
  
<div class="manImgA">
   <img src="https://dummyimage.com/300x300/000/fff&text=ONE">
</div>

<div class="manImgB">
   <img src="https://dummyimage.com/400x400/000/fff&text=TWO">
</div>

<div class="manImgC">
   <img src="https://dummyimage.com/600x600/000/fff&text=THREE">
</div>

user_48294430

The tilde ~ targets siblings which follow in the HTML markup order...

A ~ B = target B if and only if it follows A

To employ this feature of CSS in your example use something like this in your stylesheet...

/* hide all divs with a class
   which begins with 'manImg' */
div[class^=manImg] {
    display:none;
}

/* show div when p.prijs* element hovered */
p.prijsa:hover ~ div.manImgA,
p.prijsb:hover ~ div.manImgB,
p.prijsc:hover ~ div.manImgC {
    display:block;
}

Hope that helped. :)

user_47463280

If you want only with pure css,you must change pure css:

.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text:hover + div { display: block; }
<p class="text prijsa">Standard size</p>
<div class="manImgA">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">
</div>

<p class="text prijsb">Big size</p>
<div class="manImgB">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w">
</div>

<p class="text prijsc">Very big size</p>
<div class="manImgC">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeY54SaYkaOxxyXlu_ng21EMIBZvJjnZBNQAOsIh_0_6Tvu9et">
</div>

user_62220750
Related