没有JavaScript的CSS3和HTML5 div移动

Question

我可以使用CSS3和HTML5在没有JavaScript的情况下通过鼠标移动div或表吗？

我已经这样做但是当悬停移动时div会自动移动。

Answer 1

你需要JavaScript才能做到这一点。虽然您可以在CSS3中编写动画，过渡等功能，为您的网页组件提供动画，但您无法像在JavaScript中那样处理点击和拖动等内容。

值得注意的是，拖放功能确实存在于HTML5中，但不是我认为你想要实现的意义。

Answer 2

如下所示：

http://jsfiddle.net/yy2ak/

您可以使用CSS3 translate and transition移动div。或者您可以使用HTML5 draggable。但是，如果您想要更具动感的内容，那么JavaScript and jQuery就是您的选择。

要在jQuery中实现此目的，您可以：

<div id="box" style="width: 50px; height: 50px; background-color: red;" />

$("#box").mouseover(function() {
   var offset = $(this).offset().left + 20;
    $(this).animate({
       left: offset
    }, 1000);
});