使用jQuery在悬停时添加div

Question

我建立了一个类似于“行程计划器”的项目，但是我需要在克隆的div对象上添加一个在CSS左边界上的垂直线：

.line
  { width:5px, height:200px; background:red;}

成为like this（可以在垂直线上悬停查看）

我曾尝试使用代码来做到这一点：

$(function() {
    //$( ".draggable" ).resizable();
    $( ".draggable" ).draggable({
      revert: 'invalid', 
      helper:"clone",
      snap: "#drop_here td", 
      opacity: 0.7
    });
    $( "#drop_here td" ).droppable({
      // accept only from left div, 
      // this is necessary  to prevent clones duplicating inside droppable
      accept: '#left .draggable',
      drop: function( event, ui ) {
        // 4 append clone to droppable
        $( this ).append(
          // 1 clone draggable helper
          $(ui.helper).clone()

          // 2 make the clone draggable
          .draggable({
             containment:"#table",
            snap: "#drop_here td" 
          })
          // 3 make the clone resizable
          .resizable());

//HERE IS MY PROBLEM IN CODE
        $(".draggable").hover(function() {
    $(this).append("<div class='line'></div>");
}, function() {
    $(this).removeClass("line");
});
      }
    });
  });

但不工作！

DEMO

Answer 1

第一个问题是您的css插入了,的;

.line { 
  display: none;
  width: 5px; 
  height: 200px;
  background: red;
}

然后对jquery进行如下修改：

$('.draggable').hover(function(){
    $(this).find('.line').show();
}, function() {
    $(this).find('.line').hide();
});

在您的标记位置，每个.line仅after个.draggable（仅one），但不在hover上，否则append每次您hover该.draggable创建大量的.line s>

JSfiddle：http://jsfiddle.net/steo/JB7jN/1/

Answer 2

您的“悬停”处理程序将从$（this）中删除该类-而不是从附加的子级中删除该类。

Answer 3

您必须像这样将文档中的.hover（）绑定在一起：

Answer 4

如果只想将行添加到克隆中，则将start属性添加到可拖动选项中，如下所示：