悬停和单击时切换类

Question

here is my fiddle

I have a click function (item) that shows 'item-overlay' but i'd like to also add a hover to preview the div 'item-overlay' by 100px I added a mouseenter and mouseleave with height to my current code but this then works on click ?! this is my click function -

     }).on('click', '.item', function (e) {
    (".item click");
    if ($(this).closest('.timelineTile').hasClass("clicked")) {
        e.stopPropagation();
        $(this).siblings('.item-overlay').slideToggle('fast');


    }

and an example of what i tried to do -

    }).on("mouseenter", ".item", function(e) {
    if ($(this).closest('.timelineTile').hasClass("clicked")) {
    e.stopPropagation();
     $(this).siblings('.item-overlay').height(100); }

    }).on("mouseleave", ".item", function(e) {
     if ($(this).closest('.timelineTile').hasClass("clicked")) {
    e.stopPropagation();
    $(this).siblings('.item-overlay').height(0); }

Answer 1

The problem is that your other open/close animations use hide and show , which also alter the display style.

Try this JSFiddle: http://jsfiddle.net/TrueBlueAussie/w4v01t46/3/

}).on("mouseenter", ".item", function (e) {
    if ($(this).closest('.timelineTile').hasClass("clicked")) {
        e.stopPropagation();
        $(this).siblings('.item-overlay').css({display: "block"}).height(100);
    }
}).on("mouseleave", ".item", function (e) {
    if ($(this).closest('.timelineTile').hasClass("clicked")) {
        e.stopPropagation();
        $(this).siblings('.item-overlay').hide().height('');
    }
});

notes:

• height('') will reset the height css to inherit (ie no value).

If you want the height reset when you click again set it with the slideToggle call:

}).on('click', '.item', function (e) {
    (".item click");
    if ($(this).closest('.timelineTile').hasClass("clicked")) {
        e.stopPropagation();
        $(this).siblings('.item-overlay').height('').slideToggle('fast');
    }

JSFiddle: http://jsfiddle.net/TrueBlueAussie/w4v01t46/5/