I have been struggling with this code as it seems to not be working in any browser, including IE, Chrome, and Firefox. I suspect that the system should add a class, so I checked the DOM using Chrome's console. I did see the class being added, but there was no visible change in Chrome or any other browser.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
#boton
{
width:200px;
height:30px;
border:1px solid;
background-color:#cccccc;
}
</style>
<style>
.botoncla
{
background-color:#FF0000;
}
</style>
<script>
$(document).ready(function(){
$("#boton").hover(function(){
$(this).addClass("botoncla");
}, function(){
$(this).removeClass("botoncla");
});
});
</script>
</head>
<body>
<div id="boton">Hello</div>
</body>
</html>
Could someone please test this code for me? I can't seem to get it to work properly.