如何使用jquery Hovering使Div可移动的UP 和DOWN

Question

有一个要求，Divs可以上下移动，它工作正常。但我的要求是一旦悬停在 DIV 上，特定div 的上下图像将可见，其余图像应该是不可见的。我尝试了一些东西，这是代码

$(document).ready(function() {
 $(".main").hover(function(){
         $(".up").show();
         $(".down").show();
  },function(){
           $(".up").hide();
          $(".down").hide();  
});

    $('.up').click(function() {
            var parent = $(this).parent();
            parent.insertBefore(parent.prev());
        });
        $('.down').click(function() {
            var parent = $(this).parent();
            parent.insertAfter(parent.next());
        });
    });

提前致谢

这是 jsfiddle

Answer 1

如果你想实现只显示元素的子按钮，你可以做这样的事情：

$(document).ready(function() {
    $(".main").on('mouseenter', function(){
        $(this).children(".down").show();
        $(this).children(".up").show();
    });
    $(".main").on('mouseleave', function(){
        $(this).children(".down").hide();
        $(this).children(".up").hide();
    });
});

http://jsfiddle.net/renab7m5/3/

但我建议使用 CSS 来做。

使用 CSS，您可以将鼠标悬停在元素和元素的每个子元素上。

.main .down,
.main .up{
    opacity:0
}
.main:hover .up,
.main:hover .down{
    opacity:1;
}

您现在也可以转换该内容以产生很好的效果。 只需将该 CSS 样式放在 .down 或向上：过渡：不透明度 0.5s 缓入;不要忘记为不同的浏览器添加前缀过渡。

格里廷斯·蒂莫修斯

Answer 2

你可以使用jQuery Sortable，我认为它更好。

http://jqueryui.com/sortable/

检查此用法。

Answer 3

你可以使用 jQuery UI 来解决这个问题：可拖动或可排序