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