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;
}

你现在也可以转换那个东西以产生很好的效果。只需将.ss风格放入.down或up：过渡：不透明0.5s轻松进出; 不要忘记为不同的浏览器添加前缀转换。

grettings timotheus

Answer 2

你可以使用jQuery Sortable我觉得它更好。

http://jqueryui.com/sortable/

检查此用途。

Answer 3

您可以针对此问题使用jQuery UI：Draggable或Sorteble

如何使用jquery Hovering使Div可以向上和向下移动

3 个答案: