我有 4 个浮动 div,当您将鼠标悬停在 div 内的 A 标签上时,一个 div 将显示在这 4 个 div 的底部,对应于点击发生的 div。据我所知,我已经优化了 JQuery,但我只是想看看是否还有其他解决方案。
我的小提琴:http: //jsfiddle.net/jonxblaze/PyHH5/
HTML
<div class="wrap">
<div class="promo red">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="#">More</a></p>
</div>
<div class="promo yellow">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="#">More</a></p>
</div>
<div class="promo blue">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="#">More</a></p>
</div>
<div class="promo black">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="#">More</a></p>
</div>
<div style="clear:both"></div>
<div class="red wide-full">RED CONTENTS</div>
<div class="yellow wide-full">YELLOW CONTENTS</div>
<div class="blue wide-full">BLUE CONTENTS</div>
<div class="black wide-full">BLACK CONTENTS</div>
jQuery
$('.yellow.wide-full, .blue.wide-full, .black.wide-full').hide();
$('.promo a').hover( function() {
var parentDiv = $(this).parents().filter('.promo'),
wideFull = $('.wide-full');
switch (true) {
case parentDiv.hasClass('red'):
$('.red.wide-full').show();
wideFull.not('.red').hide();
break;
case parentDiv.hasClass('yellow'):
$('.yellow.wide-full').show();
wideFull.not('.yellow').hide();
break;
case parentDiv.hasClass('blue'):
$('.blue.wide-full').show();
wideFull.not('.blue').hide();
break;
case parentDiv.hasClass('black'):
$('.black.wide-full').show();
wideFull.not('.black').hide();
break;
}
})