CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3024879
user3024879

Reputation: 267

Simple javascript code for a button doesn't work in any browser

I tried to make a little script for a button on my website, but it doesn't work in any browser.

I don't see why it doesn't work. Can you guys take a look at it please to see what's wrong.

This is the HTML:

    <!DOCTYPE html>
<html>
    <head>
        <title>Button Magic</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
     <div><br/><strong>Click Me!</strong></div>   
    </body>
</html>

This is the CSS:

    div {
    height: 60px;
    width: 100px;
    border-radius: 5px;
    background-color: #69D2E7;
    text-align: center;
    color: #FFFFFF;
    font-family: Verdana, Arial, Sans-Serif;
    opacity: 0.25;
}

And this is the javascript:

$(document).ready(function (){
    $('div').mouseenter(function() {
        $('div').fadeTo('slow', 1);
    });

    $('div').mouseleave(function() {
        $('div').fadeTo('slow', 0.25);
    });

});

Thanks in advance!!

Upvotes: 2

Views: 351

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You need to include jquery.js to your page.

<!DOCTYPE html>
<html>
    <head>
        <title>Button Magic</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
     <div><br/><strong>Click Me!</strong></div>   
    </body>
</html>

Note, that above example is using a copy of jQuery 1.10.2 from Google's CDN. You can amend this to a different version if required.

Upvotes: 4

Related Questions