Tigerstipe翻滚难题

本文介绍了Tigerstipe翻滚难题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

所以我有一个列表的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; }

示范： jsfiddle/maniator/npWnm/

这里是一个例子，如果你只是想使用jQuery： jsfiddle/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'））; }）; }）;

完全备份： jsfiddle/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: jsfiddle/maniator/npWnm/

Here is an example if you just want to use jQuery: jsfiddle/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: jsfiddle/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')); }); });