2011-07-01 12 views
0

私は各アルバムの積み重ねられた写真でフォトギャラリーを構築しようとしています。私はあなたが同時に3つの画像のビットを参照するように、右20回転するために、1つの画像が20を左に回転させたい、アルバムをホバーするとき。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でそれを行うことができます知っているが、私はちょうどそうしてくださいなしのJavaScript :)

答えて

4

にCSSで遊んだ:

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

this:

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

(私は承知している限り)あなたは一度に1つの:hoverセレクタを活性化することができますので、ちょうど親要素のホバーをキャプチャします。

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

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

ul.img-stackをラッパーとして使用してください。トリガー:各写真ではなく、アルバム自体のホバーイベントをトリガーします。

ul.img-stack:hover .green {-webkit-transform: rotate(-20deg);} 
ul.img-stack:hover .blue {-webkit-transform: rotate(20deg);} 
関連する問題