我正在开发一个网站,其中每行有 2 个 div,每个占 45%。我想设置它,以便如果您连续将鼠标悬停在一个 DIV 上,该行中的另一个 DIV 将随着悬停的 DIV 展开而缩小,然后在悬停离开时恢复。缩小的 DIV 可能在行中悬停的 DIV 之前或之后,这就是我被困的地方。
HTML 将如下所示,一遍又一遍地重复:
<div class="row">
<div class="cell upcoming">
<img src="stills/press/press-logo-gdc2013.jpg" class="general"><p class="one">Panelist - Game Developers Conference 2013</p>
<p class="two">[Panel Name TBD]</p>
<p class="three"><b>Panel Date/Location:</b> [TBD] on March 25-29, 2013 at GDC (San Francisco, California)</p>
<p class="three"><b>Panelists:</b> [TBD]</p>
<p class="three"><b>Panel Blurb:</b> [TBD]</p>
</div>
<div class="cell upcoming">
<img src="stills/press/press-logo-wizard-world-st-louis.jpg" class="general"><p class="one">Panelist - Wizard World St. Louis 2013</p>
<p class="two">[Panel Name TBD]</p>
<p class="three"><b>Panel Date/Location:</b> [TBD] on March 22-24, 2013 at Wizard World (St. Louis, Missouri)</p>
<p class="three"><b>Panelists:</b> [TBD]</p>
<p class="three"><b>Panel Blurb:</b> [TBD]</p>
</div>
</div>
“行”没有 CSS,但“单元格”的 CSS 是
div.cell { position:relative; margin:2px; float:left; width:45%; text-align:justify; vertical-align:top; border:2px solid; padding:10px; border-radius:25px; -moz-border-radius:25px; }
部分 JQUERY 是这样的:
$('.cell')
.on('mouseenter', function(){
$(this).animate ({width:"75%"},"slow);
})
.on('mouseleave', function(){
$(this).animate ({width:"45%"},"slow);
});
当然,我希望“行”中的另一个“单元格”(无论是左边还是右边)随着另一个“单元格”的增长而缩小,但我不知道如何确定“其他DIV”的标识符在那一行”或者让 2 个东西同时动画。
感谢您的帮助!
最佳答案
在这种情况下,您可以使用 siblings()
来获取其他 .cell
元素。
$('.cell')
.on('mouseenter', function(){
$(this).animate ({width:"75%"},"slow").siblings('.cell').animate({'width': '15%'}, "slow");
})
.on('mouseleave', function(){
$(this).add($(this).siblings('.cell')).animate ({width:"45%"},"slow");
});
关于jquery - 将鼠标悬停在同一行中展开一个 Div 并缩小另一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14714229/