|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
|
|||||||||
| |
||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
October 31st, 2003, 07:33 AM
|
||||
|
||||
|
Hover plaintext change
How can I get plain text to change color when I hover the mouse over it using css?
I can get linked text to change color ok but not plain text. any ideas
|
|
#2
October 31st, 2003, 08:46 AM
|
||||
|
||||
|
Code:
<HTML>
<HEAD>
<STYLE>
A:hover{COLOR:red; TEXT-DECORATION: none}
A{COLOR: #00008b}
</STYLE>
<SCRIPT language=javascript>
function highlight()
{
var oObj = event.srcElement
oObj.style.color = "#FF00FF" ;
//oObj.style.textDecoration = "underline" ;
}
function lolight()
{
var oObj = event.srcElement
oObj.style.color = "#008000" ;
oObj.style.textDecoration = "none" ;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id=o style="color:#008000;" onmouseover="highlight()"
onmouseout="lolight()">Javascript style modification</DIV>
</BODY>
</HTML>
|
|
#3
October 31st, 2003, 09:20 AM
|
||||
|
||||
|
I was rather hoping i could do this without any java just using the css.
This is what I use now but the class="submenulink" is on a href and it works fine Code:
.submenulink
{
color: black;
text-decoration: none
}
:hover.submenulink
{
color: red
}
But I also have just plain text that I want to change the color on but it is not linked to a href and as the class="menu" Code:
.menu
{
color: black;
text-decoration: none
}
:hover.menu
{
color: red
}
class="menu" wont work as it's on a plain bit of text, and I was rather hoping to achieve this in the ccs without any java if possible
|
|
#4
October 31st, 2003, 09:26 AM
|
||||
|
||||
|
That isn't possible. It has to use JavaScript to detect the client-side movement and placement of the mouse.
You can set a css value to the text being displayed and it will not affect any of the font attributes, it will only change the color of the text. But you still need to have the javascript to allow for detection of the mouse events. Code:
<DIV onmouseover="highlight()" onmouseout="lolight()"><span class="txtSmallRed">Javascript style modification</span></DIV> Last edited by Memnoch : October 31st, 2003 at 09:31 AM.
|
|
#5
October 31st, 2003, 09:31 AM
|
||||
|
||||
|
Ah well I thought there would of been a way of doing this like i did with the class="submenulink" without any java at all
 Sounds like I can't do it then with plain text what a pain, never mind it looks like I'm gonna have to use the java script you posted thsnks for that, orrrrr I could use some kind of dumby href in the plain text?
|
|
#6
November 13th, 2003, 01:54 AM
|
||||
|
||||
|
Only thing wrong with that java code Memnoch gave me is that it don't work in netscape 7 or Mozilla, as anyone got a similar code that is cross browser compatable?
|
|
#7
January 10th, 2004, 08:47 PM
|
||||
|
||||
|
first of all, make sure you understand that there is a difference between Java and JavaScript. There is no relationship between the two.
You'll have to use Javascript I think. There is a hover option for the a tag but not other text from waht I understand. In javascript try element.style.color: instead of just color:. I think this should work in Netscape 7 and Mozilla
|
|
#8
January 14th, 2004, 04:50 AM
|
|||
|
|||
|
you don't need javascript.
You were nearly right:-
<style type="text/css"> <!-- .submenulink { color: #0000CC; } a.submenulink:hover { color: #FF0000; } --> </style> </head> <body> <a href="#" class="submenulink">Blah</a>I </body> You don't need javascript :-) Err just looked at the date this probably isn't helpful to you now. Last edited by snowflake : January 14th, 2004 at 04:55 AM.
|
|
#9
January 14th, 2004, 09:49 AM
|
||||
|
||||
|
snowflake, that's color change for a hyperlink. The goal is to apply the same rollover effect to "plain text" which would require javascript. The "a" tag shown below immediately applies this hover option for a hyperlink.
a.submenulink:hover { color: #FF0000; } I think the magical, nonexistent CSS capability would look something like: .submenulink:text { color: #0000CC; } .submenulink:hover { color: #FF0000; } ... or some variation of that. It doens't exist so I guess I can use whatever syntax I want 
|
|
| Viewing: ASP Free Forums > Programming > HTML, JavaScript And CSS Help > Hover plaintext change |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
