How to use tilde in css correctly in structure? - html

Question

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.

Answer 1

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>

Answer 2

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>

Answer 3

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. :)