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

也许这就是你要找的东西？

无论如何，兄弟姐妹选择器是用于以前之后的元素。

.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

代字号〜定位HTML标记顺序中的兄弟姐妹...

A~B =目标B 当且仅当跟随A

在您的示例中使用CSS的这个功能在样式表中使用类似的东西......

/* 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;
}

希望有所帮助。：）

Answer 3

如果您只想使用纯css，则必须更改纯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>

如何在css中正确使用tilde？

3 个答案: