我試圖讓每個盒子有50％寬度和100％高度。 。並且在該div框內，它就像是一個錨點鏈接，我們將鼠標懸停在第一個框（框A）上，框A將從左到右的50％寬度轉換爲完全100％的寬度。如果我們將鼠標懸停在Box B上，它也會從右向左移動並填充寬度100％。2個div盒子並排放置，寬度爲50％，高度爲100％，每個盒子上懸浮的寬度都擴大到100％
也許圖片可以更好地解釋。這是初始狀態： 
然後，當鼠標懸停在框A左側： 
然後當上按鼠標懸停在乙欄： 
我不確定如何用CSS或javascript/jquery或兩者來做到這一點？我將不勝感激，如果有人可以幫助我這個..
謝謝:)
在CSS，你可以做財產以後這樣的：
.container .box_A,
.container .box_B {
width: 50%;
overflow: hidden;
height: 100%;
-webkit-font-smoothing: antialiased;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.container:hover .box_A ,
.container:hover .box_B {
width: 0%;
}
.container:hover .box_A:hover ,
.container:hover .box_B:hover {
width: 100%;
}
對於HTML這樣的：
<div class="container">
<div class="box_A"></div>
<div class="box_B"></div>
</div>
即時接受這個答案，因爲我測試過它，它適用於我的用例..我也創建了一個jsfiddle演示任何人想看看它是如何工作的： https://jsfiddle.net/7whv1xn7/6/ – krizalis
以下是使用flexbox的方法。
爲了讓懸停效果在前面的兄弟姐妹上起作用，我顛倒了HTML中的順序。可能有一個更簡單的方法來做到這一點，但我無法破解它..
.container {
display: flex;
height: 200px;
border: 2px solid grey;
overflow: hidden;
box-sizing: border-box;
}
.block {
background: pink;
flex: 1;
margin: 10px;
/* below is styling for demo */
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.b {
order: 2;
}
.block:hover {
min-width: calc(100% - 20px);
}
.block:first-of-type:hover+.block {
display: none;
}<div class="container">
<div class="block b">B</div>
<div class="block a">A</div>
</div>Flexbox，就可以做任何事情（幾乎）：
* {
box-sizing: border-box;
}
body,html {
margin:0;
height: 100vh;
}
body {
display: flex;
align-items:center;
justify-content: center;
}
.container {
border: 7px solid #999;
height: 200px;
width: 500px;
background-color: lightgreen;
display: flex;
}
.left, .right {
height: 100%;
transition: all 0.5s;
flex: 0 1 50%;
}
.left:hover, .right:hover {
flex: 1 0 100%;
}
.left {
background-color: lightsalmon;
}
.right {
background-color: mediumpurple;
}<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>一些jQuery的
$(".a").on("mouseover", function() {
$(".a").css("width" , "100%");
$(".b").css("width" , "0");
});
$(".b").on("mouseover", function() {
$(".b").css("width" , "100%");
$(".a").css("width" , "0");
});
$(".a").on("mouseout", function() {
$(".a").css("width" , "50%");
$(".b").css("width" , "50%");
});
$(".b").on("mouseout", function() {
$(".a").css("width" , "50%");
$(".b").css("width" , "50%");
});body, html {height:100%; margin:0;}
.a {
background-color:red;
width:50%; height:100%;
float:left;
transition: all .3s;
}
.b {
background-color:blue;
width:50%; height:100%;
float:left;
transition: all .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="a"></div>
<div class="b"></div>您可以使用CSS這樣的：
.parent {
border: 2px solid black;
height: 3em;
position: relative;
width: 10em;
}
.left {
background: red;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50%;
z-index: 1;
transition: width 1s;
}
.left:hover {
width: 100%;
z-index: 2;
transition: width 1s;
}
.right {
background: blue;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 50%;
z-index: 1;
transition: width 1s;
}
.right:hover {
transition: width 1s;
width: 100%;
z-index: 2;
}
製造小提琴來說明例如：Fiddle
對於CSS是這樣的：
.ParentDiv{
\t border:1px solid #000;
\t height:200px;
\t width:300px;
\t margin:0 auto;
\t position: relative;
}
.Box_A {
width:50%;
\t height:100%;
text-align:center;
\t left:0;
background: #ff3232;
transition:all 2s ease;
\t position: absolute;
}
.Box_A:hover {
\t width:100%;
\t background: #fff;
\t z-index: 2;
\t display:block;
}
.Box_A > a {
display: block;
height: 100%;
}
.Box_B {
width:50%;
\t height:100%;
text-align:center;
\t right:0;
background: #ff3232;
transition:all 2s ease;
\t position: absolute;
\t border-left:1px solid gray;
}
.Box_B:hover {
\t width:100%;
\t background: #fff;
\t z-index: 2;
\t display:block;
}
.Box_B > a {
display: block;
height: 100%;
}<div class="ParentDiv">
\t <div class="Box_A"><a href="">Box A</a></div>
\t <div class="Box_B"><a href="">Box B</a></div>
</div>
<!--End ParentDiv-->對於Ť他下面的HTML：
CSS：
body {
background-color: #ffeead;
}
.left:hover,
.right:hover{
width: 60%;
}
.left:hover ~ #right {
width: 40%;
}
.left {
background-color: #ff6f69;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 50%;
transition: width 1s;
}
.right {
background-color: #ffeead;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
width: 50%;
transition: width 1s;
}
預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） ，無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –
@krizalis，請看看這裏：https：//jsfiddle.net/tbegh1am/ –