SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    changing css pseudo classs using javascript

    Hey Guys,
    I want to change from:

    a:hover { text-decoration:none; color:black; }

    to

    a:hover { text-decoration:underline; color:blue; }

    using javascript.
    seems like an easy thing to do, but im stuck.
    any help appreciated, thanks
    Brian

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <html>
    <head>
    <title>Untitled Page</title>
    
    <style type="text/css">
    
    a.class1:hover { text-decoration:none; color:black; }
    a.class2:hover { text-decoration:underline; color:blue; }
    
    </style>
    <script type="text/javascript">
    
    window.onload=function()
    {
    	document.getElementById("b").onclick = function ()
    	{
    		document.getElementById("a").className = "class1";
    		alert("link 2's hover style was changed");
    	}
    };
    
    </script>
    </head>
    <body>
    
    <a class="class1" href="#">link1</a>
    <a class="class2" id="a" href="#">link2</a>
    
    <input type="button" id="b" value="change link2 hover style"/>
    
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool, thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •