Question

我对以下示例感到困惑：我只想覆盖除“this”之外的所有td元素，所以基本上反转了当前正在发生的事情。不应该覆盖悬停的td，只覆盖其他的。有人可以帮助我吗？

$('td').hover(
function() {
var overlay = $('<div class="overlay">' + '</div>').hide().fadeIn(500);
$(this).find('.td-hack').append(overlay)
},
function() {
$(this).find('.overlay').fadeOut(500);
}
);

我在Jfiddle上构建了我当前的代码：http://jsfiddle.net/EbV2C/3/

感谢您的时间，干杯

Answer 1

我建议：

$('td').hover(    
    function () {
        var overlay = $('<div />', {'class' : 'overlay'});
        /* looking at the sibling elements of the current 'td',
           which explicitly excludes the current 'td'; looking
           within those 'td' elements for the '.td-hack' elements,
           iterating over those with the 'each()' method: */
        $(this).siblings('td').find('.td-hack').each(function(){
            /* appending a clone of the overlay element (otherwise
               that would be appended, on the first iteration and
               subsequently moved, hiding it, fading it in: */
            $(this).append(overlay.clone().hide().fadeIn(500));
        });
    },
    function () {
        $(this).siblings('td').find('.overlay').fadeOut(500);
    });

JS Fiddle demo

或者，略有不同：

$('td').hover(
    function () {
        var overlay = $('<div />', {
            'class': 'overlay'
        });
        /* much as above, but not using 'each()', instead passing
           an anonymous function to 'append()': */
        $(this).siblings('td').find('.td-hack').append(function(i){
            return overlay.clone().hide().fadeIn(500);
        });
    },
    function () {
        $(this).siblings('td').find('.overlay').fadeOut(500);
    });

JS Fiddle demo

要掩盖除table节点以外的整个this内的所有单元格（或向所有单元格附加覆盖）：

$('td').hover(
    function () {
        var overlay = $('<div />', {'class' : 'overlay'});
        $(this).closest('table').find('td').not(this).find('.td-hack').each(function(){
            $(this).append(overlay.clone().hide().fadeIn(500));
        });
    },
    function () {
        $(this).closest('table').find('td .overlay').fadeOut(500);
    });

JS Fiddle demo

或者：

$('td').hover(
    function () {
        var overlay = $('<div />', {
            'class': 'overlay'
        });
        $(this).closest('table').find('td').not(this).find('.td-hack').append(function(i){
            return overlay.clone().hide().fadeIn(500);
        });
    },
    function () {
        $(this).closest('table').find('td .overlay').fadeOut(500);
    });

JS Fiddle demo

最后，（对于现代/最新/符合标准的浏览器），addClass()解决方案，使用以下CSS：

td {
    /* changes follow: */
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
}
.td-hack {
    /* no changes here */
}

td.transparency {
    /* added this: */
    opacity: 0.4;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

和jQuery：

$('td').hover(
    function () {
       $(this).closest('table').find('td').not(this).addClass('transparency');
    },
    function () {
        $(this).closest('table').find('td.transparency').removeClass('transparency')
    });

JS Fiddle demo

参考文献：

Answer 2

这不是完成你想要做的事情的最好方法..每次你盘旋时，你都会添加N个新的dom元素，其中N是td-hack元素的数量......

为什么不直接。动画其他元素的不透明度以“淡出它们”？

例如 -

    $('td').on("mouseover", function() {
      $('td').not(this).css('opacity', 0.8);
    });

    $('td').on("mouseout", function() {
      $('td').css('opacity', 1.0);
    });

FadeIn除此之外的所有元素

2 个答案: