How to Disable CSS Hover With JavaScript

Written by allen bethea Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Disable CSS Hover With JavaScript
JavaScript's access to HTML DOM can enhance Web design. (Dynamic Graphics Group/Dynamic Graphics Group/Getty Images)

Hypertext Markup Language (HTML) gives programmers' access to Web pages through the Document Object Model or DOM. A knowledgeable programmer can inspect and change HTML tags, styling information and page content. These elements are part of the "document object" and are accessible to JavaScript's getElementById() method. While a link's hover attribute is not directly accessible by JavaScript, if two classes are created, one with a hover attribute and one without, they can be switched using the JavaScript command "document.getElementById("IDname").class Name = "Newclassname."

Skill level:
Moderate

Other People Are Reading

Things you need

  • Plain-text editor

Show MoreHide

Instructions

  1. 1

    Launch a standard, plain-text editor application that is available on your computer.

  2. 2

    Enter the following code into the text editor.

    <html>

    <head>

    <style type="text/css">

    a.mhover:link {colour:#green;}

    a.mhover:visited {colour:#green}

    a.mhover:hover {colour:#red;}

    a.mhover:active {colour:#yellow;}

    a.yhover:link {colour:#green;}

    a.yhover:visited {colour:#green}

    a.yhover:active {colour:#yellow;}

    </style>

    <script language="JavaScript">

    function change Class(){

    document.getElementById("aab").class Name = "yhover";

    }

    </script>

    </head>

    <body>

    <h1>

    <a href="JavaScript:change Class()" id="aab" class="mhover" >Click to stop link hover.</a>

    </h1>

    </body>

    </html>

  3. 3

    Click the File menu. Select the "Save" option. Save under the file name "test.html."

  4. 4

    Launch the web browser that is available on your computer. Click on the "File" menu item and select "Open File."

  5. 5

    Locate the file "test.html" just created, select it with the mouse and then click on "Open."

Tips and warnings

  • The CSS hover can be disabled when the page loads by adding the "onload" event to the body tag. Replace the that is in the "test.html" file and replace it with . Save the file and reload it in your browser to test the change.
  • Older browsers may not correctly execute the JavaScript change of the class name. Always test your code on different browsers and older versions of the same browser in order to ensure the code works as expected.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.