Hi guys,
I created some code, but it doesn't seem to work and I don't know why?
I have a UL list surrounded by a DIV that has a 3px solid
LightSteelBlue border.
I created code to change the text color and background color of each
LI element and the border color of the DIV while the mouse is over any
LI element, when the mouse is out, these styles are removed. The
effects for the LI elements work perfectly, but the effect for the DIV
doesn't. What am I doing wrong?
Here's the code for the custom.js file:
jQuery(document).ready(function() {
$("li").mouseover(function() {
$(this).addClass("li-hover");
$("#maindiv").addClass("maindiv-hover-effect");
});
$("li").mouseout(function() {
$(this).removeClass("li-hover");
$("#maindiv").removeClass("maindiv-hover-effect");
});
});
-------------------------------------------------------------------------------------------------
And here's the HTML and CSS code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>jQuery Starterkit</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
<style rel="stylesheet" type="text/css">
#maindiv {
border: 3px solid lightsteelblue;
height: 300px;
width: 600px;
margin: 50px;
padding:20px;
}
.maindiv-hover-effect {
border: 3px solid red;
}
.li-hover {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div id="maindiv">
<p>This is an unordered list</p>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 3</li>
</ul>
</div>
</body>
</html>
