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">
        <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>

Thanks in advance

Reply via email to