I need help with a css "fade-in" code please

silent_slaughters · Post by **silent_slaughters** » Tue Jun 19, 2007 1:52 pm

i have the following code

<style type="text/css">

#fade-in {
width:100px;
height: 100px;
display: block;
border: 0px solid blue;
background: transparent;
}

#fade-in a:hover {
background: cccccc;
}
#fade-in a {
width:100px;
height: 100px;
display: block;
text-decoration: none;
}

</style>
</head>

<body>

<div id="fade-in">
<table><tr><td>
<a href="URL">NAME OF URL</a>

</div>

what i would really like is for this code to work while im hovering over a table cell
-NOT a box with a url, in the above code if you dont have a url the fade-in effect does not work
-i need the code to be modified so that when ever the mouse goes over any table cell, the background fades to gray and then disapears as the mouse leaves
-if possible i would like it to work with class="CLAS NAME" OR "id="fade-in" which ever works, this is so i can just put <td class="CLAS NAME"> while im working in my html

silent_slaughters · Post by **silent_slaughters** » Tue Jun 19, 2007 3:55 pm

NVM I FOUND THE CODE

<style type="text/css">

td.test {
width:100px;
height: 100px;
display: block;
border: 0px solid blue;
background: transparent;
}

td.test2 {

background: cccccc;
width:100px;
height: 100px;
display: block;
text-decoration: none;
}

</style>

</head>

<body>

<table>
<tr><td class="test" onmouseover="this.className='test2'"
onmouseout="this.className='test'">Hello world!</td></tr>
</table>

SORRY, i found the code
what i would like now is if anyone can show me how to make a fade effect in that code
when you hover over the table cell, the background just pops up,,
-anyone know how it can fade in, and out, instead of just popin up,

Lixas · Post by **Lixas** » Sat Jun 23, 2007 4:04 pm

for fade'ing something (as you want) you will have to use complex javascripts. I can only suggest you to use prototype javascript library. http://www.prototypejs.org/

leegao · Post by **leegao** » Mon Aug 13, 2007 12:48 am

i prefer using jQuery b/c of its many built-in functions and elegance, a one line code could be used for your problem

$('td').each(function(){$(this).hover(function(){$(this).css('background','#CCCCCC');}, function(){$(this).css('background','transparent');});});

ok, so it might be a really long line, but it's still only one line of code

, and I also believe that this now falls into the category of Javascripting rather than CSS

This can be achieved by CSS using pseudo-selectors

td{
background-color:transparent;
}
td:hover{
background-color:#CCCCCC;
}

unfortunately however, IE does not support this pseudo-class on elements other than the anchor element <a> that have the href attribute.

Gyanu · Post by **Gyanu** » Wed Sep 05, 2007 2:12 am

then wht's the problem?

delivi · Post by **delivi** » Fri Dec 26, 2008 4:47 pm

the jQuery code can be optimized as,

Code: Select all

$("td").hover(
  function(){$(this).css({background : "#ccc"});},
  function(){$(this).css({background : "transparent"});}
);