Hi,
I would use this.find("div") to apply the animation to the appropriate div.
"this" will then reference whichever instance of the ".maps" div you are hovering over and apply the animation effect to all divs contained within it.
If you have other divs within your ".maps" div, and you only want to target (for example) the first, you can use :first-child
Here's a quick example:
HTML 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery this</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
.maps{width:200px; padding:10px; background:red; margin-bottom:15px;}
.maps > div{border:1px solid black; margin-bottom:5px}
</style>
</head>
<body>
<div class="maps">
<div>Inner div</div>
</div>
<div class="maps">
<div>Inner div</div>
<div>Inner div</div>
</div>
<script>
$(document).ready(function() {
$('.maps').hover(function() {
$(this).find("div:first-child").css("background", "green")
});
});
</script>
</body>
</html>
HTH
Reply With Quote
Originally Posted by Pullo
Bookmarks