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
I need help with a css "fade-in" code please
-
- Posts: 200
- Joined: Wed Apr 05, 2006 7:31 pm
-
- Posts: 200
- Joined: Wed Apr 05, 2006 7:31 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,
<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,
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/
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.
$('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.
the jQuery code can be optimized as,
Code: Select all
$("td").hover(
function(){$(this).css({background : "#ccc"});},
function(){$(this).css({background : "transparent"});}
);