No replies
suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 5 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

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;
}

Tags: