Dear Webmaster World,
Maybe the method below for changing an element's CSS ":hover" pseudo-class value, using JavaScript, is common knowledge--but I wasn’t able to find anything like it on the Internet. And, if there is an easier method to accomplish the same thing, please let me know...
I was able to replace the text in a 'paragraph' element with
new text using a JavaScript 'onclick' event. But, I was unable to change the paragraph's CSS ':hover' pseudo-class declaration value using the 'HTML DOM Style Object'--as you would to change a text's 'color' declaration value, for example--so that the
new text would have a different color when hovered-over by a cursor than the original text had.
Then, it dawned on me that if I could change the paragraph's 'id' value during the 'onclick' event, this new 'id' value could point to a different CSS 'selector' with a different ":hover" pseudo-class value (color) assigned to it.
After typing 'changing element's "id" value' into my search-engine, I discovered a "thread" on your Forum by somebody named
Tiibou (#:1482655 - [
webmasterworld.com ]),
who used an 'onclick="this.id='...';"' event to change an element's 'id' value.
So, I added the "this.id='...';" part of Tiibou's script to my script's 'onclick' event...and, voila!...the ":hover" color of the paragraph's new text changed!
I made sure to use the newly created 'id' value in the function that was called by the 'onclick' event.
Here, for anyone who is interested, is the code that will change an element's CSS ":hover" value using JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#click1:hover {
color: red;
}
#click2:hover {
color: blue;
}
</style>
<script type="text/javascript">
// <![CDATA[
function change_text() {
document.getElementById('click2').innerHTML="Thank You";
}
// ]]>
</script>
</head>
<body>
<span id="click1" onclick="this.id='click2'; change_text();">Click Here</span>
</body>
</html>
Thank you Tiibou, and thank you Webmaster World for this Forum.
Sincerely,
Bennie10
