Hovering over a specific <div>
Hi All,
I'm new to jquery, so please be patient.
I was wondering if someone could help me. I would like to know to to specifically target the action of a div that has the same name as other divs.
I have 3 div's in a container, each called 'item' (<div class="item">).
Each div has a <p> tag and a <span> tag inside.
I have hidden the <span> tag initially, but would like to display the <span> tag of the specific <div> that I over.
At the moment, If i hover over one div tag, it shows all spans tags
for all divs.
Example:
-
<script type="text/javascript">
$(document).ready(function(){
$('.alert').hide();
$(".item").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">
<p>this is an item</p>
<span class="alert">Here is a warning</span>
</div>
<div class="item">
<p>this is an item</p>
<span class="alert">Here is a warning</span>
</div>
<div class="item">
<p>this is an item</p>
<span class="alert">Here is a warning</span>
</div>
</div>
</body>
</html>
Any help is appreciated.
Thanks