我正在處理一個簡單的3 div佈局。 div的寬度分別設置爲33.3%，高度設置爲100%。我想要發生的是懸停在任何div的div上，div擴展爲40%寬度，而其他兩個分別在寬度上減少3.5%。不幸的是，正在發生的事情是右邊的div落到下一行。3動態內聯div不留在原地
我非常自信我可以用jQuery輕鬆做到這一點，但我更喜歡如果我可以用純CSS做到這一點。
這裏的搗鼓代碼：
https://jsfiddle.net/99gL47rp/1/
任何幫助表示讚賞！ :)
你完全可以做到這一點！你只需要有點不同的想法。 https://jsfiddle.net/jpw4w7ou/。
/*Use this to give all the child divs the same 33% width */
#sections > div {
width: 33.3%;
}
/*On hover of the container, drop ALL the children's width to 30% */
#sections:hover > div {
width: 30%;
transition:width 0.5s;
}
/*Finally, give the actual child div you are hovering over a width of 40%. This will override the previous selector's 30% width only for the currently hovered element */
#sections > div:hover{
width: 40%;
transition:width 0.5s;
}
請注意，我刪除了clear:left，這是沒有必要的，並造成問題。
你真棒！這正是我所期待的！有人告訴我這是可能的。我甚至沒有想到孩子選擇器。謝謝！ ：D – ryanhagz
沒問題...這是一個有趣的:) –
我不這樣認爲，它可以通過只有通過CSS。你需要使用jQuery的像
$("#pricing").hover(
function() {
$('#portfolio').css('width','30%');
$('#contact').css('width','30%');
}, function() {
$('#portfolio').css('width','33.3%');
$('#contact').css('width','33.3%');
}
);
如果jQuery真的是我唯一的選擇，那很好，因爲我對jQuery非常熟悉。然而，你的例子的問題是，它出了完全相同的問題，我的代碼 - 正確的div仍然下降到下一行，當中間或右側的div被徘徊時，它們會因爲換行而出現毛病。 – ryanhagz
我們不能針對另一個ID或類的鼠標懸停事件的另一個ID或類。
是的，但這並不意味着它不可能 –
你可以像下面的樣子：
body{
\t margin: 0;
\t padding: 0;
\t width: 100%;
\t height: 100%;
\t font-family: "verdana", sans-serif;
}
#nav-bar{
\t width: 100%;
\t height: 70px;
\t top: 0;
\t background-color: #000000;
\t opacity: 0.5;
\t position: fixed;
}
#sections{
\t margin-top: 70px;
}
#pricing{
\t width: 33.3%;
\t height: 100%;
\t display: inline;
\t float: left;
\t position: relative;
\t word-wrap: break-word;
\t background-color: #ff0000;
}
#pricing:hover {
\t clear: left;
width: 40%;
\t transition:width 0.5s;
}
#pricing:hover ~ #portfolio {
width: 30%;
\t transition:width 0.5s;
}
#pricing:hover ~ #contact {
width: 30%;
\t transition:width 0.5s;
}
#portfolio{
\t width: 33.3%;
\t height: 100%;
\t display: inline;
\t float: left;
\t position: relative;
\t word-wrap: break-word;
\t background-color: #00ff00;
}
#portfolio:hover {
\t clear: left;
width: 40%;
\t transition:width 0.5s;
}
#contact{
\t width: 33.3%;
\t height: 100%;
\t display: inline;
\t float: left;
\t position: relative;
\t word-wrap: break-word;
\t background-color: #0000ff;
}
#contact:hover {
\t clear: left;
width: 40%;
\t transition:width 0.5s;<div id="nav-bar">
</div>
<div id="sections">
<div id="pricing">
pricinggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
<div id="portfolio">
portttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
<div id="contact">
contacttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
</div>Usinng CSS Flex的方法，你可以做到這一點很容易，你只需要使用%價值，必須使用word-wrap: break-word;打破將長文本插入下一行。檢查Demo。
.flex
{
/* basic styling */
width: 100%;
height: 200px;
border: 1px solid #555;
font: 14px Arial;
/* flexbox setup */
display: -webkit-flex;
-webkit-flex-direction: row;
display: flex;
flex-direction: row;
}
.flex > div
{ -ms-transform-origin: 0 100%;
-webkit-transform-origin:0 100%;
transform-origin: 0 100% ;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
word-wrap: break-word;
width: 30%;
-webkit-transition: width 0.7s ease-out;
transition: width 0.7s ease-out;
}
/* colors */
.flex > div:nth-child(1){ background : #009246; }
.flex > div:nth-child(2){ background : #F1F2F1; }
.flex > div:nth-child(3){ background : #CE2B37; }
.flex > div:hover
{
width: 40%;
}
<div class="flex">
<div>portttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</div>
<div>pricinggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
<div>portttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</div>
</div>
你必須使用jquery，方便的解決方案。 –
就像我說過的，我真的更喜歡用純CSS來嘗試，如果無法完成，我只需要走這條路。 – ryanhagz