在悬停和单击时切换类

Question

这是我的fiddle

我有一个显示“item-overlay”的点击功能（item），但我还想添加一个悬停以将 div 'item-overlay' 预览 100px 我添加了一个具有高度的 mouseenter 和 mouseleave 到我的当前代码，但这在点击时起作用？！这是我的点击功能 -

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


    }

以及我尝试做的一个例子 -

    }).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

问题是您的其他打开/关闭动画使用hide 和show，这也改变了display 样式。

试试这个 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('');
    }
});

注意事项：

• height('') 会将高度 css 重置为继承（即没有值）。

如果您希望在再次单击时重置高度，请使用slideToggle 调用进行设置：

}).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/