Question

假设我有2张照片。 Pic A在图片B前面。我希望B在我悬停时旋转A.这是我的HTML代码

<div id="nav">
<img class="button" src="images/ornament.png"/>
<img class="circle" src="images/profile.png"/>
</div>

我的CSS

.circle:hover .button
{
transition: 3s;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate (360deg);
}

请有人帮我这个。非常感谢！

Answer 1

CSS目前无法横向移植DOM，因此在这种情况下不可能。你需要使用JavaScript才能做到这一点。

在纯CSS中，你可以做相反的事情。更改标记的顺序：

<img class="circle" src="//.." />
<img class="button" src="//.." />

EXAMPLE HERE

使用相邻的兄弟组合子+或一般同级组合子~。

.circle:hover + .button {
    transition: 3s;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate (360deg);
}

使用相同的HTML，您还可以通过以相反方向浮动元素来更改视觉顺序。 (example)

除此之外，值得注意的是你使用.circle:hover .button;这将选择一个类button的元素，该元素是具有类.circle的元素的后代，它处于:hover状态。

悬停时使另一个图像旋转

1 个答案: