我创建了一个在你鼠标悬停时显示的气泡（实际上只有第一个元素）。问题是，泡沫会破坏布局并移动其余元素。我不知道如何解决它，帮助。请帮忙
#products #productsGrid {
width: 100%;
list-style: none;
padding: 0;
}
#products #productsGrid li {
display: inline-block;
line-height: 5px;
width: 24%;
height: 200px;
margin: 15px 0; }
#products #productsGrid li header h5 {
margin: 0;
line-height: 1px; }
#products #productsGrid li header .description {
font-size: 10px;
line-height: 10px; }
#products #productsGrid li button {
border-radius: 6px;
border-style: none;
padding: 2px 20px;
background-color: #d40505;
box-shadow: inset 0 -20px 10px -10px rgba(0, 0, 0, 0.3), inset 0 10px 10px -10px rgba(0, 0, 0, 0.3);
color: white;
float: left;
width: 110px;
margin: 0;
padding: 6px 20px; }
#products #productsGrid li button span {
font-weight: bold; }
#products #productsGrid li .wojna_domowa p {
display: none; }
#products #productsGrid li .wojna_domowa:hover p {
display: block; }
#products #productsGrid li .wojna_domowa:hover .bubble {
position: relative;
width: 180px;
height: 210px;
padding: 0px;
background: #FFFFFF;
top: -130px;
right: -98px;
border-radius: 6px;
border: #00ABC8 solid 2px; }
#products #productsGrid li .wojna_domowa:hover .bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 19px 12px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -19px;
top: 20px; }
#products #productsGrid li .wojna_domowa:hover .bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 13px 20px 13px 0;
border-color: transparent #00ABC8;
display: block;
width: 0;
z-index: 0;
left: -22px;
top: 19px; }
#products #productsGrid li:nth-child(1) {
margin: 0 auto 25px auto; }
#products #productsGrid li:nth-child(2) {
margin: 0 auto 25px auto; }
#products #productsGrid li:nth-child(3) {
margin: 0 auto 25px auto; }
#products #productsGrid li:nth-child(4) {
margin: 0 auto 25px auto; }<div id="products">
<ul id="productsGrid">
<li>
<div class="wojna_domowa">
<header>
<h5>Wojna domowa</h5>
<br><br>
<span class="description">
Easy Virtue (2008)
<br><br>
produkcja: Wielka Brytania
gatunek: komedia rom.
<br><br>
</span>
</header>
<button type="button"><span>Więcej</span></button>
<div class="bubble">
<p>phokuh</p>
</div>
</div>
</li>
<li>
<header>
<h5>Stary, kocham Cie</h5>
<br><br>
<span class="description">
I love You, man (2008)
<br><br>
produkcja: USA<br>
gatunek: komedia rom.
<br><br>
</span>
</header>
<button type="button"><span>Więcej</span></button>
</li>
<li>
<header>
<h5>Kac Vegas</h5>
<br><br>
<span class="description">
The Hangover (2008)
<br><br>
produkcja: Niemcy<br>
gatunek: komedia.
<br><br>
</span>
</header>
<button type="button"><span>Więcej</span></button>
</li>
<li>
<header>
<h5>Wojna domowa</h5>
<br><br>
<span class="description">
Easy Virtue (2008)
<br><br>
produkcja: Wielka Brytania
gatunek: komedia rom.
<br><br>
</span>
</header>
<button type="button"><span>Więcej</span></button>
</li>
<li>
<header>
<h5>Wojna domowa</h5>
<br><br>
<span class="description">
Easy Virtue (2008)
<br><br>
produkcja: Wielka Brytania
gatunek: komedia rom.
<br><br>
</span>
</header>
<button type="button"><span>Więcej</span></button>
</li>
<li>
<header>
<h5>Stary, kocham Cie</h5>
<br><br>
<span class="description">
I love You, man (2008)
<br><br>
produkcja: USA<br>
gatunek: komedia rom.
<br><br>
</span>
</header>
<button type="button"><span>Więcej</span></button>
</li>
<li>
<header>
<h5>Kac Vegas</h5>
<br><br>
<span class="description">
The Hangover (2008)
<br><br>
produkcja: Niemcy<br>
gatunek: komedia.
<br><br>
</span>
</header>
<button type="button"><span>Więcej</span></button>
</li>
<li>
<header>
<h5>Wojna domowa</h5>
<br><br>
<span class="description">
Easy Virtue (2008)
<br><br>
produkcja: Wielka Brytania
gatunek: komedia rom.
<br><br>
</span>
</header>
<button type="button"><span>Więcej</span></button>
</li>
</ul>
</div>
答案 0 :(得分：0)
添加以下css可能会有所帮助
li {
position: relative;
vertical-align: top;
}
.bubble {
position: absolute;
}
在查看完CSS后，我发现bubble上课时我已经将position: absolute用于悬停，因此您只需将属性添加到li。
答案 1 :(得分：0)
您可以非常轻松地使用jQuery执行此操作：
# Automatically created by: scrapy start project
#
# For more information about the [deploy] section see:
# http://doc.scrapy.org/topics/scrapyd.html
[settings]
default = linkedIn.settings
[deploy]
#url = http://localhost:6800/
project = linkedIn
然后只需添加一些css，如：
$(document).ready(function() {
$("button").hover(function() {
$(this).toggle(".bubble");
}
});
});