Change background colour of individual elements on the fly

Posted by John on Stack Overflow See other posts from Stack Overflow or by John
Published on 2010-04-29T14:33:01Z Indexed on 2010/04/29 14:37 UTC
Read the original article Hit count: 282

Filed under:

css

|

jquery-css

|

jQuery

Hi,

Is there a way in CSS or JQuery where I can dynamically change the background of li tags so they get slightly lighter for each element until it gets to white.

For example say I had a list of 10 li elements. The first would have a red (#ff0000) background, the next one would then be a lighter shade of red, and so on and so on until we got to the last one which would have a background of white (#FFFFFF)

The list can be any length and i just want the background colour to go from one colour e.g. red to another colour e.g. white. My site uses JQuery so if I have to use that I don't mind.

Thanks

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about jquery-css

django : nginx : jquery css not being served

as seen on Server Fault - Search for 'Server Fault'
I'm using apache+mod_wsgi for django. And all css/js/images are served through nginx. For some odd, reason when others/friends/colleagues try accessing the site, jquery/css is not getting loaded for them, hence the page looks jumbled up. My html files use code like this - <link rel="stylesheet"… >>> More
jquery css menu not selecting the active link

as seen on Stack Overflow - Search for 'Stack Overflow'
What is wrong with this and how could I fix it. I have css menu (horizontal) that I want the background and font to be changed when one of the items is selected. I found another post that gave me some jquery code to help make it work, and I thought I had it coded right, but when I click on an item… >>> More
Change text fields background colour if negative number using Jquery/CSS

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I have the following text input on a budget calculator form which displays the final balance... <tr><td align="right"><b>Balance: £</b></td><td align="left"><input type="text" class="res" name="res" id="res" size="10" readonly="readonly"></td></tr> How… >>> More
Jquery Css Selector Add Value

as seen on Stack Overflow - Search for 'Stack Overflow'
How can i reset a display:none and add some value here is the code onclick="$('reason{$test->id}').css('display:block'); $('#reasonid{$test->id}').val(this.value);" >>> More
jQuery + CSS Manipulation using each()

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I am trying to create a css menu. I would like to remove border and padding for every last li > a element on the child ul tag. (sorry for confusing) Here is the code for the menu <ul id="nav"> <li><a id="cat1" href="#">Menu 1</a></li> … >>> More