[jQuery] Animating the specific div youre hovering over, from a selection of divs with the same name
Hi All,
I have 3 divs with the same name wrapped in a container.
Each div includes a span.
At the moment, when you hover over a div, its displays all spans.
What i want is if you hover over a specific div, i would like to
display it's span only.
Is this possible ?
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.alert').hide();
$(this).hover(
function () {
$(".alert").show('slow');
},
function () {
$(".alert").hide('slow');
}
);
});
</script>
<style type="text/css">
#container{
width: 600px;
height: 300px;
}
.item{
float: left;
width:200px;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">
this is an item
<span class="alert">Here is a warning</span>
</div>
<div class="item">
this is an item
<span class="alert">Here is a warning</span>
</div>
<div class="item">
this is an item
<span class="alert">Here is a warning</span>
</div>
</div>
</body>
</html>
Thanks in advance