我有一個簡單的單頁網站，在網站結尾處有鏈接框。CSS抑制元素
這是我的HTML：
<div class="link-wrapper">
<div class="link-box">
Galerie
</div>
<div class="link-box">
Shop
</div>
</div>
這是我的CSS：
.link-wrapper {
height: 40%;
width: 100%;
}
.link-box {
height: 100%;
width: 50%;
float: left;
}
徘徊在一個箱子後，框應越來越大，推動其他箱從視口中移出。就像這樣：
有沒有用CSS來解決這個還是我使用JavaScript的方式？
我們不能用css選擇以前的兄弟，所以可以用JavaScript或者一些框架式的jQuery。
$(function() {
$('.link-box.left').hover(
function() {
$('.link-box.right').toggleClass('right-out');
}
);
$('.link-box.right').hover(
function() {
$('.link-box.left').toggleClass('left-out');
}
);
});html,
body {
height: 100%;
}
body {
margin: 0;
}
.link-wrapper {
overflow: hidden;
position: relative;
height: 40%;
width: 100%;
}
.link-box {
transition: width 0.4s linear, right 0.4s linear, left 0.4s linear;
position: absolute;
background: #0f0;
height: 100%;
width: 50%;
left: 0;
}
.link-box.right {
background: #f00;
left: auto;
right: 0;
}
.link-box.left-out {
left: -50%;
}
.link-box.right-out {
right: -50%;
}
.link-box:hover {
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="link-wrapper">
<div class="link-box left">
Galerie
</div>
<div class="link-box right">
Shop
</div>
</div>純的CSS溶液：
<div class="link-wrapper">
<div class="link-box" id="toGallery">
Galerie
</div>
<div class="link-box" id="toShop">
Shop
</div>
.link-wrapper {
height: 40%;
width: 100%;
transition: all 1s ease-in
}
.link-wrapper:hover {
margin-left: -10%
}
.link-box {
height: 100%;
width: 40%;
float: left;
transition: all 1s ease-in
}
div#toGallery:hover {
margin-left:10%;
margin-right:10%;
}
div#toShop:hover {
margin-left:10%;
}