0

I am building an application that initially displays a collection of pictures giving the user the possibility to select some of them and add them to another div.

For these dynamically added images I need to enable hovering functionality to enlarge images on hover.

This my Jquery approach:

$(document).on('hover','#zooming',function(){
            $("#zooming").addClass('hover');
    }
        , function() {
            $("#zooming").removeClass('hover');
        }

    );

css code:

#zooming{
  &.hover{
    cursor: pointer;
    color:white;
    background: #dbdbe0;
    z-index: 1000;
    padding:20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width:auto;
    height:auto;

  }
}

when I use this approach the enlargement of image never happens after hovering.

When I use 

 $(document).on('hover','#zooming',function(){
            $("#zooming").addClass('hover');
    }
   );

The image is enlarged but never goes back to its original size which is normal. Could you spot what am I doing wrong here?

Thank you very much.

user2008973
  • 435
  • 3
  • 9
  • 22
  • 4
    There is no `hover` event, you cannot then delegate it. `hover` method in jQuery is a shorthand for `mouseenter/mouseleave`, these events can be delegated, e.g: http://stackoverflow.com/a/14938484/1414562 – A. Wolff May 23 '14 at 13:49
  • `When I use...` `The image is enlarged but never goes back to its original size which is normal` Looks like you are testing it wrongly too EDIT: or using older jQuery version – A. Wolff May 23 '14 at 13:53
  • Thank you very much. I hadn't found that answer, it helped me a lot. – user2008973 May 24 '14 at 10:24

0 Answers0