CSS：將鼠標懸停在3個堆疊的圖像上

我正在嘗試爲每個相冊創建一個包含堆疊照片的照片庫。當您懸停相冊時，我想讓1張圖像向左旋轉20圈，其中一張向右旋轉20張，這樣我就可以同時看到3張圖像。CSS：將鼠標懸停在3個堆疊的圖像上

我認爲問題在於懸停信號卡在堆棧頂部的圖像上。我會發布我在下面試過的。有任何想法嗎？可能嗎？

<!DOCTYPE html> 
<head> 
<title>Just-CSS: Rotate stacked images on hover</title> 
<style> 
body { 
    background-color: black; 
    color: white; 
    padding: 20px; 
    } 
ul { 
    margin: 0; 
    padding: 0; 
    } 
ul li { 
    list-style: none; 
    position: absolute; 
    } 

img { -webkit-transition: all 0.2s; } 
img:hover.green {-webkit-transform: rotate(-20deg);} 
img:hover.blue {-webkit-transform: rotate(20deg);} 

img { border: 4px solid white; } 
img.red { background-color: red; } 
img.green { background-color: green; } 
img.blue { background-color: blue; } 
</style> 
</head> 
<body> 
<ul class="img-stack"> 
    <li><img class="red" width="100" height="100" src=""></li> 
    <li><img class="green" width="100" height="100" src=""></li> 
    <li><img class="blue" width="100" height="100" src=""></li> 
</ul> 
</body> 
</html>

我知道你可以用JavaScript做，但我只是用CSS玩所以請沒有的JavaScript :)

來源

2011-07-01 Ola

只要改變這一點：

img:hover.green {-webkit-transform: rotate(-20deg);} 
img:hover.blue {-webkit-transform: rotate(20deg);}

至此：

ul:hover img.green {-webkit-transform: rotate(-20deg);} 
ul:hover img.blue {-webkit-transform: rotate(20deg);}

因爲你（因爲我知道遠）只能激活一次一個:hover選擇，只是捕捉父元素上懸停。

來源

2011-07-01 11:26:59

img:hover.green {-webkit-transform: rotate(-20deg);}

到

img.green:hover {-webkit-transform: rotate(-20deg);}

來源

2011-07-01 11:25:49

我想你應該使用你的ul.img棧作爲包裝來做到這一點。觸發相冊本身上的：懸停事件，而不是每張圖片。

ul.img-stack:hover .green {-webkit-transform: rotate(-20deg);} 
ul.img-stack:hover .blue {-webkit-transform: rotate(20deg);}

來源

2011-07-01 11:27:02

CSS：將鼠標懸停在3個堆疊的圖像上

回答

相關問題