| Author |
 Topic  |
|
|
Da_Stimulator
DEV Team Forum Moderator
USA
3373 Posts |
 Posted - 27 October 2001 : 22:31:40
|
I need to know how to make a certain class have a hover equiv...
this is the class that I need to make a hover equiv - I want it so when the table cell is hovered over, the background color changes and the text color changes, and the text-decoration goes to underline. I've tried 'tdhading.hover', 'tdheading:hover' and they dont work, I'm not sure how to do this.
.tdheading
{
background-color:#0066FF;
color:#000000;
font-style: bold;
font-family: Arial, Verdana;
text-decoration: none;
text-transform: none;
text-align: center;
}
---------------
Da_Stimulator has spoken |
|
|
Cyber Paladin
New Member
55 Posts |
Posted - 27 October 2001 : 22:53:47
|
You'll have to use the OnMouseOver, and OnMouseOut functions to get that to work. Tables don't have a hover ability like that.
<tr onMouseover="this.style.backgroundColor='#000000'" onMouseout="this.style.backgroundColor='#2D2D2D'"> Something like that. 
|
 |
|
|
Da_Stimulator
DEV Team Forum Moderator
USA
3373 Posts |
Posted - 27 October 2001 : 23:00:14
|
what if I used <span> inside of the td with the class tdheading, would that be able to hover?
---------------
Da_Stimulator has spoken |
|
|
|
Da_Stimulator
DEV Team Forum Moderator
USA
3373 Posts |
Posted - 27 October 2001 : 23:06:25
|
btw how would I put that into a function? currently I have this...
function changebg(tdbgcolor)
{
this.style.backgroundColor = tdbgcolor;
}
but it says 'this' is not an object...
---------------
Da_Stimulator has spoken |
|
|
|
redbrad0
Advanced Member
USA
3725 Posts |
Posted - 28 October 2001 : 00:44:21
|
stim, look at hotmails new site. When you click on a check box to delete the item or different things the whole row turns a different color. Maybe that might help with some ideas.
Brad |
|
|
|
Rasco
Advanced Member
Germany
3192 Posts |
Posted - 28 October 2001 : 03:01:14
|
Try to use the :hover pseudo class from CSS.
Works like that
a:hover{color:red; text-decoration:none}
|
|
|
|
Da_Stimulator
DEV Team Forum Moderator
USA
3373 Posts |
Posted - 28 October 2001 : 03:05:52
|
I already tried that
---------------
Da_Stimulator has spoken |
|
|
|
Rasco
Advanced Member
Germany
3192 Posts |
Posted - 28 October 2001 : 05:47:17
|
Uuuppsss....sorry, shouldn`t think about JavaScript and CSS shortly after getting up. 
<td onmouseover="bgColor='#0000ff' "onmouseout="bgColor='#ff0000'">
This works only for IE.  Havent`t figured a way out to get it run on NS ond Opera ant to put it in a function, yet.
Will work on that.
|
|
|
|
Roland
Advanced Member
Netherlands
9335 Posts |
Posted - 28 October 2001 : 07:11:36
|
Here's what you do to make a table change it's bgcolor when you have your mouse on it:
<td bgcolor="#DFDFDF" onmouseover="mOvr(this,news);this.style.backgroundColor='#ECECEC'" onmouseout="mOut(this,news);this.style.backgroundColor='#DFDFDF'" onClick="goToURL('parent','news.htm');return document.returnValue;">
I use this on my site all the time (http://www.frutzle.com) and it works in Netscape 6 and IE. Netscape 4.72 and Opera5 just show the default bgcolor.
|
|
|
|
Rasco
Advanced Member
Germany
3192 Posts |
Posted - 28 October 2001 : 07:26:08
|
Sorry, thatīs not right.
It`s only working with links.
Moving in IE 6.0 in section "Hello & Welcome...." it`s also working.
Trying it with NS 4.72 and Opera 5.01, nothing happens.
|
|
|
|
Roland
Advanced Member
Netherlands
9335 Posts |
Posted - 28 October 2001 : 07:34:35
|
quote:
Sorry, thatīs not right.
It`s only working with links.
Moving in IE 6.0 in section "Hello & Welcome...." it`s also working.
Trying it with NS 4.72 and Opera 5.01, nothing happens.
What do you mean it only works with links? I have this all over my site and the tables are not linked (only in the sub menu).
As I said, in Netscape 6 and IE it works. It doesn't work in Netscape 4.73 and Opera, but it shows the default bgcolor.
|
|
|
|
Da_Stimulator
DEV Team Forum Moderator
USA
3373 Posts |
Posted - 28 October 2001 : 08:57:24
|
Thats alright, I got it...
function LmOver(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#CCFFFF";
elem.style.cursor = 'hand'}
function LmOut(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#FFFFFF";}
<td width="100%" onMouseover="LmOver(this, '#000099')" onMouseout="LmOut(this, '#000066')">
---------------
Da_Stimulator has spoken |
|
|
|
Rasco
Advanced Member
Germany
3192 Posts |
Posted - 28 October 2001 : 09:19:33
|
quote:
What do you mean it only works with links? I have this all over my site and the tables are not linked (only in the sub menu).
As I said, in Netscape 6 and IE it works. It doesn't work in Netscape 4.73 and Opera, but it shows the default bgcolor.
Sorry, man. I apologize for that. I have read out that. Looks like, two hours of sleep at night are not nearly enough. Will go to bed and get some more.
|
|
|
|
snaayk
Senior Member
USA
1061 Posts |
Posted - 29 October 2001 : 14:11:03
|
If you wanted to do it using CSS all you had to was:
<td onmouseover="className='whatever'" onmouseout="className='otherclass'">
I you want it clickable then you do:
<td onclick="javascript:location.href='webaddress' onmouseover="className='whatever'" onmouseout="className='otherclass'">
Also, if you are doing it for the forum or somewhere where there are multiple <TD>s in the <TR>, then give the above events to the <TR> instead of the <TD> and remove all colorbg from the <td>s
Aside from that, you got the class itself setup correctly..
You can see it working here: http://realmslore.dingojunction.com/forum...forgive the crappy design I haven't made up my mind what I am going to do.
********************
We all have photographic memories, some just don't have film.
Edited by - snaayk on 29 October 2001 14:12:12 |
|
|
|
MorningZ
Junior Member
USA
169 Posts |
|
|
Roland
Advanced Member
Netherlands
9335 Posts |
Posted - 29 October 2001 : 14:46:30
|
Hey thanks, that'll save me a lot of trouble next time I redo my site and still want to use that stuff.
http://www.frutzle.com |
|
|
| |
Topic |
|
Topic Locked
