mouseover effect

<style>
.member-frame {
width:145px;
height:100px;
border:1px solid #343434;
display: inline-block;
}
.member-cont {
width:150px;
display: inline-block;
margin:0px;
}
h4 { font-size:10px; font-family:Verdana, Geneva, sans-serif; display:block;}
</style>
<div id="band-intro">
<div class="member-cont"><div class="member-frame"></div><h4><img src="images/badge.png" />BAND MEMBER ONE</h4></div>
<div class="member-cont"><div class="member-frame"></div><h4><img src="images/badge.png" />BAND MEMBER TWO</h4></div>
<div class="member-cont"><div class="member-frame"></div><h4><img src="images/badge.png" />BAND MEMBER THR</h4></div>
<div class="member-cont"><div class="member-frame"></div><h4><img src="images/badge.png" />BAND MEMBER FOU</h4></div>
<div class="member-cont"><div class="member-frame"></div><h4><img src="images/badge.png" />BAND MEMBER FIV</h4></div>
<div class="member-cont"><div class="member-frame"></div><h4><img src="images/badge.png" />BAND MEMBER SIX</h4></div>
</div>
<script>
$(".member-cont").mouseover(function () {
$(".member-frame").animate({ borderTopColor: "#196091", borderBottomColor: "#196091", borderLeftColor: "#196091", borderRightColor: "#196091" }, 'slow');
$("h4").fadeTo("slow", 1.0);
});
$(".member-cont").mouseout(function () {
$(".member-frame").animate({ borderTopColor: "#343434", borderBottomColor: "#343434", borderLeftColor: "#343434", borderRightColor: "#343434" }, 'slow');
$("h4").fadeTo("slow", 0.33);
});
</script>

What trying to achieve is to have a div which when you mouseover a div and h4 within will change properties.

This is working but when you mouseover the div and pass over either the border of the containing div or the h4 text the animate/fadeTo repeat again.

Is someone able to tell what Im doing wrong?

Also you may notice the function is effecting more than one container div at a time which is not what Im going for.

Is there a way to seperate them like this or somehow?

Topic Participants