Tigerstipe翻滚难题 [英] Tigerstipe rollover conundrum

问题描述

所以我有一个列表的div通过jQuery交替的背景颜色。这些也具有更改背景颜色的滚动。问题是，翻转功能只允许我在mouseout上将这个类设置为一个背景颜色，但是像我之前所说的，我有一个交替的背景颜色。我如何在jQuery中处理这个？我的代码下面是我试图在一个if，else语句的偶数和奇数，但我不知道正确的语法。

  $（document）.ready（function（）{
 $（'。whycapad_staff：even'）css（{background-color：＃eaebeb}）; 
 $ whycapad_staff'）。hover（function（）{
 $（this）.stop（）。animate（{background-color：＃5facf8}，300）; 
} {
 if（$（this ='：even'））{
 $（this）.stop（）。animate（{background-color：＃eaebeb}，300）
}; 
 else {
 $（this）.stop（）。animate（{background-color：＃FFFFFF}，300）
} 
} ）
}）
  

解决方案

  .whycapad_staff：nth-​​child（even）{
 background-color：#eaebeb; 
} 
 .whycapad_staff：hover {
 background-color：＃5facf8; 
} 
  

示范： http://jsfiddle.net/maniator/npWnm/

这里是一个例子，如果你只是想使用jQuery： http://jsfiddle.net/maniator/npWnm/5/

  $（function（）{// jQuery fallback 
 $（'。whycapad_staff'）。hover b $ b $（this）.data（'b-color'，$（this）.css（'background-color'））; 
 $（this）.css（'background-color'，' 5facf8'）; 
}，function（）{
 $（this）.css（'background-color'，$（this）.data（'b-color'））; 
 }）; 
}）; 
  
 
 
 
 
 
 
完全备份： http://jsfiddle.net/maniator/npWnm/9/  
  $（function（）{// jQuery fallback 
 $（'。whycapad_staff' 2 == 1）{
 $（this）.css（'background-color'，'#eaebeb'）; 
} 
}）; 
 $（'。whycapad_staff '）.hover（function（）{
 $（this）.data（'b-color'，$（this）.css（'background-color'））; 
 $（this）。 css（'background-color'，'＃5facf8'）; 
}，function（）{
 $（this）.css（'background-color'，$（this）.data -color'））; 
}）; 
}）; 
  
 
So I have a list of divs that have alternating background colors through jQuery. These also have rollovers that change the background color. The problem is, the rollover function only allows me to animate this class back to one background color on mouseout, but like I said before, I have an alternating background color. How can I handle this in jQuery? My code below was my attempt at an if, else statement with even and odd, but I don't know the proper syntax.
$(document).ready(function() {
    $('.whycapad_staff:even').css({"background-color":"#eaebeb"});
    $('.whycapad_staff').hover(function() {
        $(this).stop().animate({"background-color":"#5facf8"}, 300);
    }, function(){
        if ($(this = ':even')){
            $(this).stop().animate({"background-color":"#eaebeb"}, 300)
        };
        else {
                $(this).stop().animate({"background-color":"#FFFFFF"}, 300)
        }
    })
})

解决方案
Just use css:
.whycapad_staff:nth-child(even) {
     background-color:#eaebeb;
}
.whycapad_staff:hover {
     background-color:#5facf8;
}
Demo: http://jsfiddle.net/maniator/npWnm/

Here is an example if you just want to use jQuery: http://jsfiddle.net/maniator/npWnm/5/
$(function() { //jQuery fallback
    $('.whycapad_staff').hover(function() {
        $(this).data('b-color', $(this).css('background-color'));
        $(this).css('background-color', '#5facf8');
    }, function() {
        $(this).css('background-color', $(this).data('b-color'));
    });
});




Full fallback: http://jsfiddle.net/maniator/npWnm/9/
$(function() { //jQuery fallback
    $('.whycapad_staff').each(function(index, item){
        if(index%2 == 1){
            $(this).css('background-color', '#eaebeb');
        }
    });
    $('.whycapad_staff').hover(function() {
        $(this).data('b-color', $(this).css('background-color'));
        $(this).css('background-color', '#5facf8');
    }, function() {
        $(this).css('background-color', $(this).data('b-color'));
    });
});


                        
这篇关于Tigerstipe翻滚难题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！