Jquery not working in visual studio 2013

Question

0.00/5 (No votes)

See more:

, +

Hi all
I'm new in jQuery and I wrote some codes
i added jquery via Nuget in visual studio 2013 but my code does not make any changes in browsers!

help me!
thanks.

What I have tried:

JavaScript

(function () {

    var ele = $("#username");
    ele.text("Amir Nazarizadeh");

    var main = $("#main")
    main.on("mouseenter", function () {
        main.style = "background-color: #888;";
    });
    main.onmouseleave= function () {
      main.style = "";
    };


})();

and here is site.css

CSS

/* site.css */
body {
  font-family: sans-serif;
  font-size: 14px;
  margin: 0;
}

label {
  font-weight: bold;
  display: block;
}

input[type=text], input[type=password], textarea {
  width: 150px;
}

#main {
  background-color: #eee;
  padding: 4px;
  margin: 0;
}

#footer {
  background-color: #222;
  color: #eee;
  padding: 8px 5px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.headshot {
  max-width: 50px;
  border: 1px solid #222;
  padding: 3px;
}

.menu {
  font-size: 12px;
}

  .menu li {
    list-style-type: none;
  }

    .menu li.active {
      font-weight: bold;
    }

    .menu li a {
      color: #eee;
    }

#sidebar {
  background: #2a2c36;
  color: #eee;
  position: fixed;
  height: 100%;
  width: 250px;
  overflow: hidden;
  left: 0;
  margin: 0;
  -moz-transition: left ease .25s;
  -o-transition: left ease .25s;
  -webkit-transition: left ease .25s;
  transition: left ease .25s;
}

  #sidebar.hide-sidebar {
    left: -250px;
    -moz-transition: left ease .25s;
    -o-transition: left ease .25s;
    -webkit-transition: left ease .25s;
    transition: left ease .25s;
  }

#wrapper {
  margin: 0 0 0 250px;
  -moz-transition: margin-left ease .25s;
  -o-transition: margin-left ease .25s;
  -webkit-transition: margin-left ease .25s;
  transition: margin-left ease .25s;
}

  #wrapper.hide-sidebar {
    margin-left: 0;
    -moz-transition: margin-left ease .25s;
    -o-transition: margin-left ease .25s;
    -webkit-transition: margin-left ease .25s;
    transition: margin-left ease .25s;
  }

and here is Index.html

HTML

<!DOCTYPE html>
<html>

<head>
    <title>The World</title>

    <link rel="stylesheet" href="css/site.css" />
    <meta charset="utf-8" />

</head>

<body>
    <div id="sidebar">
        <img src="img/74453_113728845356834_1128282_n.jpg" alt="headshot" class="headshot" />
        <span id="username">Amir Nazarizadeh</span>
        <ul class="menu">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

    <div id="wrapper">
        <div id="main">
            <h1>The World</h1>
            <p>This will be a fun website soon!</p>

            <form>
                <div>
                    <label>Date</label>
                    <input />
                </div>
                <div>
                    <label>Location</label>
                    <input />
                </div>
                <div>
                    <input type="submit" value="Add" />
                </div>
            </form>

        </div>
        <div id="footer">
            &copy; 2015 The World Ltd.
        </div>
    </div>
    
    <script type="text/javascript" src="Scripts/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/site.js"></script>
    
</body>

</html>

Posted 26-Aug-16 1:08am

amir.nazarizadeh

Updated 26-Aug-16 4:15am

Add a Solution

Comments

ZurdoDev 26-Aug-16 8:00am

Debug and find out what is happening. How can we know what is happening?

amir.nazarizadeh 26-Aug-16 8:07am

there is no error in visual studio but onmouseenter and onmouseleave not working in browser!
there is no changes at all.

ZurdoDev 26-Aug-16 8:12am

If it is just css that you are changing, then use :hover in css instead.

Richard Deeming 26-Aug-16 9:57am

As Ryan said, no need for Javascript:

#main {
  background-color: #eee;
  padding: 4px;
  margin: 0;
}
#main:hover {
  background-color: #888;
}

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-08-26T04:15:00

Solution 1

try this

JavaScript

var main = $("#main")
  main.on("mouseenter", function () {
      this.style = "background-color: #888;";
  });
  main.on("mouseleave", function () {
      this.style = "background-color: white";
  });

main is a jquery object which does not contain style property, so you need to use "this" to access the style property of the element

Posted 26-Aug-16 4:15am

Karthik_Mahalingam

Updated 26-Aug-16 4:17am

v2

Comments

amir.nazarizadeh 26-Aug-16 10:35am

it works! thanks and thanks Karthik :)

Karthik_Mahalingam 26-Aug-16 10:35am

welcome amir :)