使用jquery在悬停时添加div

Question

I build a project something like "trip planner" but I need to add on my cloned div-object an verticl line on left border with css:

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

so to be something like this (you can see on hover an vertical line)

I was try to do this with code:

$(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");
});
      }
    });
  });

but dont work!

DEMO

Answer 1

The first problem is that you're css has a , insted of a ;

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

}

then for the jquery modify like this:

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

In your markup place a .line (only one ) just after every .draggable , but not on hover or it will append it every time you hover the .draggable creating tons of .line s

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

Answer 2

Your "hover out" handler removes the class from $(this) -- not from the appended child.

It's probably bad practice to dynamically create elements on hover, that are never deleted & will presumably gradually fill the document with garbage.

Answer 3

You have to bind the .hover() in the document ready like this:

$(document).ready(function(){
      $(".draggable").hover(function() {
          $(this).append("<div class='line'></div>");
      }, function() {
          $(this).children('.line').remove();
      });
});

Answer 4

if you only want to add the line to the clone add the start property to the draggable options like this:

$( ".draggable" ).draggable({
  revert: 'invalid', 
  helper:"clone",
  snap: "#drop_here td", 
  opacity: 0.7,
  start: function(event, ui){
    var clone = $(ui.helper);
    if (clone.children('div.line').length == 0)
        clone.append("<div class='line'></div>");
  }
});

Tested this and it works like a charm.. Dont forget to remove this part:

    $(".draggable").hover(function() {
         $(this).append("<div class='line'></div>");
    }, function() {
         $(this).removeClass("line");
    });