僅CSS懸停在縮略圖上以顯示div

Question

當您將鼠標懸停在相應的div縮略圖上時，我正在嘗試一種僅使用CSS來顯示元素中圖像的簡單方法。 我認為使用tildie（〜）將對象定位到thumbnail：hover范圍之外相對容易，因為它們都在父容器中，但是它似乎不起作用，我寧願不要為此使用Javascript，但是如果不可能，那就這樣吧，只是以為我會看到其他人對此的投入，也許將來會對某人有所幫助。

的HTML

<div class="container">
  <!-- Main images -->
  <div class="primary img1">
    <img src="myimage.jpg" />
  </div>

  <div class="primary img2">
    <img src="myimage2.jpg" />
  </div>

  <!-- Thumbnails -->
  <div class="thumb img2">
    <img src="myimage2.jpg" />
  </div>
</div>

的CSS

.primary.img1 {
  display: block;
}

.primary.img2 {
  display: none;
}

.primary.img2:hover, .primary.img1 {
  display: none;
}

.primary.img2:hover, .primary.img2 {
  display: block;
}

Answer 1

代碼的問題在於，拇指位於要顯示的圖像之后。 如果您查找正在使用的選擇器，則將了解原因。

〜組合器分隔兩個選擇器，並且僅在第二個選擇器后面有第二個選擇器時才與之匹配，並且兩者都共享一個公共父項。

通用兄弟選擇器

因此，您現在可以看到，我們可以通過將.thumb放在.thumb來使其工作。 （對CSS進行了少許更改，因此當我們將.thumb懸停.thumb它將顯示新圖像。）

 .primary.img1 { display: block; } .primary.img2 { display: none; } .thumb.img2:hover ~ .primary.img1 { display: none; } .thumb.img2:hover ~ .primary.img2 { display: block; } 

 <div class="container"> <!-- Thumbnails --> <div class="thumb img2"> <img src="http://placehold.it/350x150" /> </div> <!-- Main images --> <div class="primary img1"> <img src="http://placehold.it/351x150" /> </div> <div class="primary img2"> <img src="http://placehold.it/352x150" /> </div> </div> 

Answer 2

實際上，您在這里所做的事情是完全錯誤的，因為盡管您有一個.primary容器， .primary您的img分類應該放在圖像上。 第二，您不能將鼠標懸停在顯示上方：none元素。 不顯示將不可見的元素從頁面中刪除。 （元素不可見，但仍在結構中）。因此，基本上，您正在懸停顯示的.primary.img2:hover ，使.primary.img1顯示：none。 並沒有真正了解您要嘗試的內容，但是我將向您展示一種結構，希望對您有所幫助。

HTML：

<div class="container">
  <!-- Main images -->
  <div class="primary">
    <img class="img1" src="myimage.jpg" />
  </div>

  <div class="primary">
    <img class="img2" src="myimage2.jpg" />
  </div>

  <!-- Thumbnails -->
  <div class="thumb">
    <img class="thumb-img2" src="myimage2.jpg" />
  </div>
</div>

CSS：

.primary .img1 {
  display: block;
}

.primary .img2 {
  display: block;
}

.img2:hover .img1 {
  display: none;
}

.img2:hover .img1 {
  display: block;
}

希望它能以某種方式幫助您...