Nim199 Posted March 27, 2007 Share Posted March 27, 2007 I have a website that I need the font color to change to blue form red when the text is hovered over. I am using the <p> tag. I am assuming this can be done in JS.Thanks for reading! Link to comment Share on other sites More sharing options...
aspnetguy Posted March 27, 2007 Share Posted March 27, 2007 HTML <p id="changeThis">Some text</p> JS var para = document.getElementById('changeThis');para.onmouseover = function(){this.style.color = "blue"}para.onmouseout = function(){this.style.color = "red"} Link to comment Share on other sites More sharing options...
Nim199 Posted March 27, 2007 Author Share Posted March 27, 2007 This didn't work. Link to comment Share on other sites More sharing options...
pulpfiction Posted March 27, 2007 Share Posted March 27, 2007 Seems to be working fine. try this code... <html><head><title></title><script type="text/javascript"></script></head><body><form name="qtn1" onload="test()"><p id="changeThis" style="color:red;">Thanks for reading! </p><script>var para = document.getElementById('changeThis');para.onmouseover = function(){this.style.color = "blue"}para.onmouseout = function(){this.style.color = "red"}</script></form></body></html> Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted March 27, 2007 Share Posted March 27, 2007 You don't need JavaScript for this. Use Pseudo-classes in CSS instead. <style type="text/css">p.para {color:#00f}p.para:hover {color:#f00}</style> Put that in your <head> section and your paragraphs should be: <p class="para"> It should work properly in today's browsers. Link to comment Share on other sites More sharing options...
jesh Posted March 28, 2007 Share Posted March 28, 2007 It should work properly in today's browsers.It should work, yes, but it doesn't in IE6. Link to comment Share on other sites More sharing options...
Nim199 Posted March 28, 2007 Author Share Posted March 28, 2007 I have tryed using CSS in numerous ways, but not this, So I will just check (even though I am using IE). THANKS EVERYONE! Link to comment Share on other sites More sharing options...
pulpfiction Posted March 28, 2007 Share Posted March 28, 2007 To make it even simpler.... try this.<p style="color:red;" onmouseover="java script:this.style.color='blue';" onmouseout="java script:this.style.color='red';" >Thanks for reading! </p> Link to comment Share on other sites More sharing options...
Nim199 Posted March 28, 2007 Author Share Posted March 28, 2007 I'll try them all! Link to comment Share on other sites More sharing options...
Nim199 Posted March 28, 2007 Author Share Posted March 28, 2007 I am useing IE 7.0, but it doesn't work.Sorry to cause this trouble. Link to comment Share on other sites More sharing options...
Nim199 Posted March 28, 2007 Author Share Posted March 28, 2007 Is there a way I could have a useless <a> because they are easy to format, to work instead? I have tryed a couple of things, but they don't like me. Link to comment Share on other sites More sharing options...
aspnetguy Posted March 28, 2007 Share Posted March 28, 2007 you could use an <a href="java script:void(0)">Text</a> Link to comment Share on other sites More sharing options...
pulpfiction Posted March 28, 2007 Share Posted March 28, 2007 Try this if you are using <a> <html><head><title></title><style type="text/css">a.txt { color:red; text-decoration:none;}a.txt:hover { color:blue; text-decoration:none;}</style></head><body><form name="frm1"><a href="java script:void(0);" class="txt">Thanks for reading!</a></form></body></html> Link to comment Share on other sites More sharing options...
Nim199 Posted March 28, 2007 Author Share Posted March 28, 2007 Thanks guys, the only problem is that when I click on the text it goes to "webaddress/void:(0)". I have tryed having the href as "" but that opens the website folder quite understantably. If I make it "#" it opens the page again, but that is not what I would prefrobly like.If there is a sulution to this, than I will be very gratfull for it. Once again, thanks! Link to comment Share on other sites More sharing options...
jesh Posted March 28, 2007 Share Posted March 28, 2007 If there is a sulution to this, than I will be very gratfull for it. Once again, thanks!If javascript is enabled in the browser, this'll work:<a href="#" onclick="return false;">Clicking on this does nothing.</a> Link to comment Share on other sites More sharing options...
Patrick Posted March 29, 2007 Share Posted March 29, 2007 To make it even simpler.... try this.<p style="color:red;" onmouseover="java script:this.style.color='blue';" onmouseout="java script:this.style.color='red';" >Thanks for reading! </p>The problem which makes this NOT work is the "java script:" in the beginning of the onmouseover event. Either type it "java script:" (in one word, but this forum automatically splits the word in two) or completely remove that part as below, and this works in both Firefox and IE to me:<p onmouseover="this.style.color='blue'" onmouseout="this.style.color='red'" style="color: red;">Testing</p> Link to comment Share on other sites More sharing options...
Nim199 Posted April 4, 2007 Author Share Posted April 4, 2007 Thanks Patrick, I will see if that works when I have abit more time.And thnks to everyone else. Link to comment Share on other sites More sharing options...
Nim199 Posted April 9, 2007 Author Share Posted April 9, 2007 Yay!It worked perfectly, except, can I use the RGB colour tool? It needs to be exact.Thanks To Everyone Who Has Replied Link to comment Share on other sites More sharing options...
Nim199 Posted May 20, 2007 Author Share Posted May 20, 2007 My thanks to:~Patrick~jesh~pulpfiction~aspnetguyand~FirefoxRocks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now