Question

这是我的fiddle

我有一个点击功能（项目），显示＆＃39; item-overlay＆＃39;但是我还想添加一个悬停来预览div＆＃39; item-overlay＆＃39;通过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/

在悬停和单击时切换类

1 个答案: