html - 如何在结构中正确使用css中的代字号？

Question

我有以下问题。
在演示部分，我有以下代码:

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

当您将鼠标光标移到其中一个文本段落上时，应该会出现一个图像。如果我用图像替换代码上方的段落，那将起作用。

但是当我像上面显示的那样输入结构时，它不起作用。
我试图在网上找到答案，为什么它不起作用...我在这里发布我的问题是因为我没有找到明确的答案。

Answer 1

也许这就是您要找的？

无论如何，siblings 选择器适用于之后而不是之前的元素。

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