How to use tilde in css correctly in structure?

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.

tilda means following sibling elements only [(See this for more information)](https://stackoverflow.com/questions/10782054/what-does-the-tilde-squiggle-twiddle-css-selector-mean), so put your main divs after the text divs and it should work — Pete, Nov 15 '17 at 12:59
I think your issue is the "text.prijs[...]" selectors. Drop the "text." part and use what's left over. — JohnH, Nov 15 '17 at 13:04
@JohnH the `.text` can stay, the elements have both classes so it should work like that — Ricardo Ribeiro, Nov 15 '17 at 13:22

score 1 · Answer 1 · answered Nov 16 '17 at 11:05

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>

Germano Plebani, this example is how I have it. What I have to figure out is how to get it work same way but then with the hovered text below the images. — Johnny, Nov 16 '17 at 11:15
AAAAH ok undurstand now! You can't only with css you have to use jquery. — Germano Plebani, Nov 17 '17 at 08:32

Brian Peacock · Answer 2 · 2017-11-15T13:55:54.843

0

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

edited Nov 15 '17 at 13:55

answered Nov 15 '17 at 13:23

Brian Peacock

1,801
16
24

Yes. Sloppy me. Fixed. – Brian Peacock Nov 15 '17 at 13:37

score 0 · Answer 3 · answered Nov 15 '17 at 13:23

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>

I understand what you're writing, but unfortunately it doesnt work how I expected that it would work. By using the mouse-over I want that the related image will appear. But this image stays above all other codes (an other position at the page). In the example/answer the image stays directly under the hovered text... — Johnny, Nov 15 '17 at 17:22

How to use tilde in css correctly in structure?

3 Answers3