If i hover on first li its coming bt if i hover on 2nd li its coming on first only.
here is the html
<div class="airPortFiltr">
<div class="sameAirport">
<input type="checkbox" />
<label>Depart/Return, same airport</label>
</div>
<h4>Departing From</h4>
<div class="airportdetails">
<ul>
<li><input type="checkbox" /></li>
<li id="valuenw" style="width:132px">LGA - LaGuardia
<a href="#" style="display:none">only</a>
</li>
<li>$ 238</li>
</ul>
</div>
<div class="airportdetails">
<ul>
<li><input type="checkbox" /></li>
<li style="width:132px">LGA - LaGuardia</li>
<a href="#" style="display:none">only</a>
<li>$ 238</li>
</ul>
</div>
</div>
here is the fiddle
http://jsfiddle.net/VRE9n/
here is the js
$(document).ready(function () {
$(".airportdetails").mouseover(function() {
$(".airportdetails li a").show();
}).mouseout(function(){
$(".airportdetails li a").hide();
});
})
Just use
$("li a", this).show();instead of$(".airportdetails li a").show();.thisis thediv.airportdetailselement which lies bellow your mouse cursor.