Make jquery effect happen only on one instance of element at a time

[suavedesign]

Using jquey, I am making some elements on my site fade in and out. http://www.boneiolam.org/ns/ - The part I am referring to is on the grey background, under "services". How do I make the effect occur on only one instance of the element at a time?
For example, when you rollover "consultation", only "consultation" will have the effect, and not all the other services listed there.
Jquery:

$(document).ready(function() {
$(".bot").mouseenter(function() {
$(".over").fadeIn(1000); 
});

$(".over").mouseleave(function() {
$(".over").fadeOut(800);   
});
});

HTML:

<div class="bot"><div class="service">Consultation</div><div class="over"></div></div>

CSS:

.bot {
    background: url(images/home_service.png) no-repeat;
    width:328px;
    height:29px;
    margin:0 0 10px 0;
}

.over {
    display:none;
    background: url(images/home_servicemo.jpg) no-repeat;
    width:328px;
    height:29px;
    margin:0 0 10px 0;
}

Thanks

[pm771]

I opened your site in Chrome and didn't see the described behavior.

In the above code your bind mouseenter event to bot which is an all-ecompassing <div> element. Try to apply it to over instead (the same way you do for mouseleave).

[Airshow]

You want something more like :

$(".bot").on('mouseenter', function() {
    $(this).siblings(".over").fadeIn(1000);
}).on('mouseleave', function() {
    $(this).siblings(".over").fadeOut(800);   
});

This should give the desired behaviour for all .bots that are in place on page load.

If .bots (and/or their contents) are dynamically added, then you need to consider delegation, which would be a mild adaptation of the above code.

[Airshow]

Looking at the HTML again, it should probably be :

$(".bot").on('mouseenter', function() {
    $(this).find(".over").fadeIn(1000);
}).on('mouseleave', function() {
    $(this).find(".over").fadeOut(800);
});

[suavedesign]

thanks, airshow. that was what i was looking for!