I have the following issue.  

In a demo part I have the code below: 

```html
<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.