Question

我有一个图像和4个不同的div。我试图以不同的程度旋转该图像，具体取决于悬停的div。到目前为止，我只能通过悬停在自身上来旋转图像。没有亲子关系。我想做的是什么？

HTML

<div id="line">
<img src="images/Line2.png" id="liner" alt="settings" />
</div>
<div id="d1">
</div>
<div id="2">
</div>

CSS

#d1:hover + #liner {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg) ;
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);

}

Answer 1

最理智的解决方案是使用javascript执行此操作。但如果你想纯粹在CSS3中这样做，那就有可能。看看我为你准备的这个JSFiddle：

http://jsfiddle.net/4NQfj/

诀窍是嵌套div并最终将图像嵌套在最深层。例如：

<div id="d1">
    <div id="d2">
        <div id="d3">
            <img id="couldBeAnImage" src="...">
        </div>
    </div>
</div>

然后，您可以通过在每个div上显示图像来简单地调整图像的变换属性：悬停。因此，为了缩短小提琴中的代码，我基本上是这样做的：

#d1:hover #couldBeAnImage { transform: rotate(15deg); }
#d2:hover #couldBeAnImage { transform: rotate(30deg); }
#d3:hover #couldBeAnImage { transform: rotate(45deg); }

您想要使用javascript的原因是因为需要调整每个div的大小并使其定位才能使用此技巧。这不是问题，除了假设你可以这样做并不总是现实的：a。）根据你的布局和...执行此操作.b。）处理每个div和随后的事实图像的位置都与每个祖先div相关。

所以这使得它有点棘手，但这是你所描述的问题的100％CSS解决方案。如果我自己不这样说，那就很有趣了解。）

修改

当然你也可以用javascript做到这一点。这是一个表现出轻微＆＃34;草率的小提琴＆＃34;溶液：

http://jsfiddle.net/k3t2U/1/

您执行此操作的方法是将鼠标悬停和鼠标输出事件添加到div。在这种情况下，div可以完全相互独立：

<div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <div id="couldBeAnImage"></div>

在我的示例中，我使用jQuery的.hover（）方法添加事件处理程序。 Hover基本上让你这样做：.hover（functionToCallOnMouseOver（），functionToCallOnMouseOut（））

所以我仍在处理CSS中的旋转。我有三个代表不同旋转级别的类。然后在我的mouseOver和mouseOut事件处理程序中，我添加或删除指定不同旋转量的类。

$("#d1").hover(function(){ $("#couldBeAnImage").addClass("rotate"); },function(){ $("#couldBeAnImage").removeClass("rotate"); });

在javascript中，您可以通过多种方式实现这一目标。所以这只是一个例子。它在你拥有更多自由和控制实际元素的意义上更强大。 CSS方法基本上是一种诀窍＆＃39;并且您在如何指定标记和样式方面受到极大限制。一般来说，我建议使用javascript来解决这个问题。

如何通过将鼠标悬停在css3中的不同div上来旋转图像？

1 个答案: