使用組合子交換圖像

Question

我有一些縮略圖，大圖像的左側（參見：http://i57.tinypic.com/fp4e47.png）

我試圖找出如何，這樣，當用戶將鼠標懸停在的一個使用組合子縮略圖，大圖像交換到縮略圖的對應放大圖像。

這是可能的CSS單獨嗎？

感謝

Answer 1

如果結構允許的話，您可以在CSS3中使用帶有wilde標記的src屬性值和選擇器~。

DEMO

#gallerie { 
    width:800px; 
    margin:auto; 
} 
.thumb { 
    margin:1em; 
} 
.thumb:nth-child(2n+2) { 
    float:left; 
} 
.thumb:nth-child(odd) { 
    clear:left; 
    float:left; 
} 
.hold { 
    overflow:hidden; 
    width:500px; 
    margin:1em; 
    position:relative; 
} 
.hold img { 
    max-width:100%; 
} 
.hold img + img { 
    /* because we keep first image in the flow 
    to size .hold and show something*/ 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
} 
[src*="nature/1"]:hover ~ .hold img[src*="nature/1"], 
[src*="nature/2"]:hover ~ .hold img[src*="nature/2"] , 
[src*="nature/3"]:hover ~ .hold img[src*="nature/3"] , 
[src*="nature/4"]:hover ~ .hold img[src*="nature/4"] , 
[src*="nature/5"]:hover ~ .hold img[src*="nature/5"] , 
[src*="nature/6"]:hover ~ .hold img[src*="nature/6"] { 
    display:block; 
    z-index:1; 
} 

這種結構

<div id="gallerie"> 
<!-- do notwrap .thumb to use it to access to .hold via CSS --> 
<img class="thumb" src="http://lorempixel.com/100/80/nature/1" /> 
<img class="thumb" src="http://lorempixel.com/100/80/nature/2" /> 
<img class="thumb" src="http://lorempixel.com/100/80/nature/3" /> 
<img class="thumb" src="http://lorempixel.com/100/80/nature/4" /> 
<img class="thumb" src="http://lorempixel.com/100/80/nature/5" /> 
<img class="thumb" src="http://lorempixel.com/100/80/nature/6" /> 
<div class="hold"> 
    <img src="http://lorempixel.com/1000/800/nature/1" /> 
<img src="http://lorempixel.com/1000/800/nature/2" /> 
<img src="http://lorempixel.com/1000/800/nature/3" /> 
<img src="http://lorempixel.com/1000/800/nature/4" /> 
<img src="http://lorempixel.com/1000/800/nature/5" /> 
<img src="http://lorempixel.com/1000/800/nature/6" /> 
    </div> 
</div> 

Answer 2

你可以做到這一點很容易使用background-position和width/height特性結合單獨使用CSS的:hover僞選擇。

例如，如果您定義的CSS如下：

a.myLink { 
    width: 88px; 
    height: 88px; 
    display: block; 
    background: url('http://oi57.tinypic.com/fp4e47.jpg') no-repeat; 
    background-position: -4px -10px; 
} 

a.myLink:hover { 
    width: 429px; 
    height: 329px; 
    background-position: -197px -10px; 
} 

​​

注意我是如何已經轉移懸停背景圖像。請記住，爲了指定<a>元素的大小，您需要使用display: block將其定義爲塊級元素。