Jquery не работает в visual studio 2013
Всем привет
Я новичок в jQuery и написал несколько кодов
я добавил jquery через Nuget в visual studio 2013, но мой код не вносит никаких изменений в браузеры!
помоги мне!
спасибо.
Что я уже пробовал:
(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 = "";
};
})();
а вот сайт.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;
}
а вот Index.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">
© 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>
ZurdoDev
Отладьте и выясните, что происходит. Как мы можем знать, что происходит?
amir.nazarizadeh
в visual studio нет ошибки, но onmouseenter и onmouseleave не работают в браузере!
нет никаких изменений вообще.
ZurdoDev
Если вы меняете только css,то вместо этого используйте :hover in css.
Richard Deeming
Как сказал Райан, нет необходимости в Javascript:#main {
background-color: #eee;
padding: 4px;
margin: 0;
}
#main:hover {
background-color: #888;
}