twitter 喜欢 jquery 中的当前行效果？答案

【问题标题】：twitter like current row effect in jquery?twitter 喜欢 jquery 中的当前行效果？
【发布时间】：2010-07-12 21:17:18
【问题描述】：

我正在迭代 div 并编辑，删除其中的按钮...如何在鼠标悬停时隐藏链接按钮并在鼠标悬停时显示它们，就像 twitter 一样......

$.each(data.Results, function() {
                    divs += '<div class="resultsdiv"><a href="Clients\Details' + this.ClientId + '">Edit</a><br/><a href="Clients\Details' + this.ClientId + '">Delete</a></div>';
                });
                $("#ResultsDiv").append(divs);
                $(".resultsdiv:even").addClass("resultseven");
                $(".resultsdiv").hover(function() {
                    $(this).addClass("resultshover");
                }, function() {
                    $(this).removeClass("resultshover");
                });

css 是：

.resultseven { background-color: #EFF1f1; }
.resultshover { background-color: #F4F2F2; cursor:pointer; }

【问题讨论】：

标签： jquery twitter effect mousehover

【解决方案1】：

您可以使用.children() 找到孩子并为其设置动画，如下所示：

$.each(data.Results, function() {
    divs += '<div class="resultsdiv"><a href="Clients\Details' + this.ClientId + 
            '">Edit</a><br/><a href="Clients\Details' + this.ClientId + 
            '">Delete</a></div>';
});
$("#ResultsDiv").append(divs);
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
    $(this).addClass("resultshover").children('a').stop(true, true).fadeIn();
}, function() {
    $(this).removeClass("resultshover").children('a').stop(true, true).fadeOut();
});

或者，使用 .animate() 的较短版本，最初将它们隐藏在 CSS 中并执行以下操作：

$(".resultsdiv").hover(function() {
    $(this).toggleClass("resultshover")
           .children('a').stop(true, true).animate({opacity: 'toggle');
});

【讨论】：

【解决方案2】：

你可以遍历孩子并隐藏它们

$.each(data.Results, function() {
    divs += '<div class="resultsdiv"><a href="Clients/Details' + this.ClientId +     '">Edit</a><br/><a href="Clients/Details' + this.ClientId + '">Delete</a></div>';
});
$("#ResultsDiv").append(divs);
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").children().hide();
$(".resultsdiv").hover(function() {
    $(this).addClass("resultshover");
    $(this).children().show();
}, function() {
    $(this).removeClass("resultshover");
    $(this).children().hide();
});

【讨论】：

2 东西..你在悬停时隐藏它们，所以它是相反的，$(this).children().each(function(){ $(this).hide(); }); 可以只是$(this).children().hide();，或者与上面的.addClass() 链接，而不是创建额外的 jQuery 对象:)

【解决方案3】：

你可以，

$.each(data.Results, function() {
    var divs = '<div class="resultsdiv"><a href="Clients\Details' + this.ClientId + '">Edit</a><br/><a href="Clients\Details' + this.ClientId + '">Delete</a></div>';
    $(divs).hide();
    $(this).append(divs);
    $('.resultdiv:even').addClass('resultseven');
    $(this).hover(function() {
            $(this).find('.resultsdiv').show().addClass('resultshover');
        }, 
        function() {
            $(this).find('.resultsdiv').hide().removeClass('resultshover');
        }
    );
});

我假设您的 data.Results 是元素列表。也许li

【讨论】：