Home/ Questions/Q 7855973
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T20:32:45+00:00

My HTML codes not implement the CSS styling..The border in the CSS file is

  • 0

My HTML codes not implement the CSS styling..The border in the CSS file is not being implemented.
I tried both in Firefox & IE. Please provide your inputs.

Please find the code below:

HTML

<html>
    <head>
        <link href="file://c:/jquery/chapter-1/begin/styles/my_style.css" rel="stylesheet"> 
    </head>
    <body>
        <div id="header" class="no_hover"><h1>Header</h1></div>
        <button type="button" id="btn1">Click to Add</button>
        <button type="button" id="btn2">Click to Remove</button>
        <script src="file://c:/jquery/chapter-1/begin/scripts/jquery.js"    type="text/javascript"></script>
        <script src="file://c:/jquery/chapter-1/begin/scripts/test4.js" type="text/javascript"></script>
    </body>
</html>

jS FILE

$(document).ready(function() {
    $("#btn1").click( function(){
        $("#header").addClass("hover");
        $("#header").removeClass("no_hover");
    });
    $("#btn2").click( function(){
        $("#header").removeClass("hover");
        $("#header").addClass("no_hover");
    });
});

CSS FILE

.hover{
    border: solid #f00 3px;
}
.no_hover{
    border: solid #000 3px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is some code to help you with your jQuery or to clean it up. Don’t dive into the DOM multiply times. If you are then create a variable. Also you can chain your events. It looks like you are just starting jQuery so when you get more into it you will learn this. Hope this helps.

    JSFiddle

    $(document).ready(function() {
    var header = $("#header");

    $("#btn1").on("click", function() {
       header.addClass("hover").removeClass("no_hover");                      
    });
    $("#btn2").on("click", function() {
        header.removeClass("hover").addClass("no_hover");
    });
});​
    • 0