Soy nuevo en JQuery y estoy tratando de averiguarcómo hacer que funcionen mis métodos .mouseenter () y .mouseleave (). Hasta ahora he intentado usar IE8 y FF, pero por alguna extraña razón no puedo hacer que mis elementos hagan nada más que permanecer estático. Aquí está el código que tengo hasta ahora:
HTML:
<!Doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="file:///D:/Documents%20and%20Settings/stsc/My%20Documents/_prac/script.js"></script>
<title>Practice</title>
</head>
<body>
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
</body>
</html>
CSS:
div{
height:100px;
width: 100px;
border-radius: 50px;
}
#red{
background-color: red;
}
#yellow{
background-color: yellow;
}
#green{
background-color: green;
}
JS:
$(document).ready(function(){
$("div").mouseenter(function(){
$(this).animate({
width: "+=10px"
});
});
$("div").mouseleave(function(){
$(this).animate({
width: "-=10px"
});
});
$("div").click(function() {
$(this).toggle(1000);
});
});
Este es solo un ejemplo simple para practicar el uso de JQuery. ¡Gracias de antemano por la ayuda chicos!
Respuestas
2 para la respuesta № 1Parece que no estás incluyendo jQuery:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Además, ¿es la unidad D: un disco duro o una unidad de CD / DVD? Eso también podría ser un problema.
1 para la respuesta № 2
Debe hacer referencia a la biblioteca jquery dentro de su HTML:
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="file:///D:/Documents%20and%20Settings/stsc/My%20Documents/_prac/script.js"></script>
<title>Practice</title>
</head>