Question

我正在尝试为每张专辑构建一个堆叠照片的照片库。当你悬停相册时，我希望1个图像向左旋转20个，一个向右旋转20个，所以我同时看到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：）

Answer 1

只需改变一下：

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选择器（据我所知），只需捕获父元素上的悬停。

Answer 2

我猜你应该使用你的ul.img-stack作为包装来做到这一点。触发：专辑本身的悬停事件，而不是每张图片。

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

Answer 3

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

到

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

CSS：将鼠标悬停在3个堆叠的图像上

3 个答案: