CSS圖片交換一次一個

的jsfiddle這裏：https://jsfiddle.net/br84z1Lj/CSS圖片交換一次一個

懸停，兩個圖像交換，而不只是一個。如果我結束「swapMe」的div並重新啓動它以用於下一個圖像，它會將下一個圖像放在下一行，而不是保持一致。我完全停留在獲取只有一個圖像改變懸停而不是兩個！

CSS

@charset "utf-8"; 

/* CSS Document */ 

#thumbs { 
    width: 460px; 
    margin-top: 90px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
} 

#thumbs a { 
    vertical-align: top; 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
} 

.stretch { 
    width: 100%; 
    display: inline-block; 
    font-size: 0; 
    line-height: 0 
} 

.swapMe img { 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

.swap1, 
.swapMe:hover .swap2 { 
    -webkit-opacity: 1; 
    -moz-opacity: 1; 
    opacity: 1; 
} 

.swapMe:hover .swap1, 
.swap2 { 
    -webkit-opacity: 0; 
    -moz-opacity: 0; 
    opacity: 0; 
}

HTML

<body> 

    <div id="thumbs"> 
    <div class="swapMe"> 

     <a id="single_image1" href="#"><img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" /> 
     <img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2"> 
     </a> 

     <a id="single_image2" href="#"><img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" /> 
     <img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2"> 
     </a> 



     <span class="stretch"></span> 

    </div> 
    </div> 


</body> 

</html>

來源

2016-07-06 Eric

這是你想完成什麼？ https://jsfiddle.net/br84z1Lj/1/ – Berdesdan

修訂的底部盤旋聲明，這應該訣竅，如果我明白你在找什麼！注意，前綴不透明聲明在這一點上並不是必須的，我能想到的任何版本中的每個現代瀏覽器都支持普通的不透明度。

.swap1:hover, 
.swap2:hover { 
    opacity: 0; 
}

https://jsfiddle.net/will0220/awpv02p7/

來源

2016-07-06 18:34:30 will

感謝您的回答！我剛剛爲這段代碼使用了一個教程 - 你說的前綴不透明聲明是什麼？此外，我能夠使用跨度而不是div來修復我的代碼，但這似乎也起作用了！ – Eric

當然！我的意思是-webkit-opacity，-moz-opacity等 - 只是在每個現代瀏覽器中，opacity都適用。 – will

你需要用2幅圖像在不同的div的。您可以使用display: inline-block

我更新了你的小提琴。 https://jsfiddle.net/br84z1Lj/1/

CSS

@charset "utf-8"; 

/* CSS Document */ 

#thumbs { 
    width: 460px; 
    margin-top: 90px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
} 

#thumbs a { 
    vertical-align: top; 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
} 

.stretch { 
    width: 100%; 
    display: inline-block; 
    font-size: 0; 
    line-height: 0 
} 
.swapMe { 
    display: inline-block; 
}  
.swapMe img { 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

.swap1, 
.swapMe:hover .swap2 { 
    -webkit-opacity: 1; 
    -moz-opacity: 1; 
    opacity: 1; 
} 

.swapMe:hover .swap1, 
.swap2 { 
    -webkit-opacity: 0; 
    -moz-opacity: 0; 
    opacity: 0; 
}

HTML

<body> 

    <div id="thumbs"> 
    <div class="swapMe"> 

     <a id="single_image1" href="#"><img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" /> 
     <img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2"> 
     </a> 
    </div> 
    <div class="swapMe"> 
     <a id="single_image2" href="#"><img src="http://dummyimage.com/200/000000/fff" class="swap1" style="position: absolute" height="150" width="188" alt="" /> 
     <img src="http://dummyimage.com/200/d100d1/fff" height="150" width="188" class="swap2"> 
     </a> 
    </div> 


    <span class="stretch"></span> 

    </div> 


</body> 

</html>

來源

2016-07-06 18:32:53 Berdesdan

請不要嘗試這個CSS代碼：

.swap1, 
.swapMe a:hover .swap2 { 
    -webkit-opacity: 1; 
    -moz-opacity: 1; 
    opacity: 1; 
} 

.swapMe a:hover .swap1, 
.swap2 { 
    -webkit-opacity: 0; 
    -moz-opacity: 0; 
    opacity: 0; 
}

來源

2016-07-06 18:33:51 vignesh

CSS圖片交換一次一個

回答

相關問題