CSS3過渡改變另一個元素的保證金

Question

我有這樣的HTML文檔：

<div id="c"> 
    <div class="base"> 
     <div class="cb" id="red" data-color="Red"> 
     </div> 
    </div> 
    <div class="base"> 
     <div class="cb" id="green" data-color="Green"> 
     </div> 
    </div> 
    <div class="base"> 
     <div class="cb" id="blue" data-color="Blue"> 
     </div> 
    </div> 
</div> 

，這是我的CSS：

<style type="text/css"> 
.cb { 
    display: inline-block; 
    background-color: #56a100; 
    width: 70%; 
    height: 70%; 
    margin-top: 15%; 
    filter: alpha(opacity=50); 
    -moz-opacity: 0.5; 
    opacity: 0.5; 
    -ms-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -webkit-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
.cb:hover { 
    display: inline-block; 
    filter: alpha(opacity=100); 
    -moz-opacity: 1; 
    opacity: 1; 
    width: 100%; 
    height: 100%; 
    margin-top: auto; 
    -ms-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -webkit-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
.base { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    margin-left: 5px; 
    margin-top: 20px; 
    border-style: ridge; 
    text-align: center; 
    vertical-align: central; 
} 
</style> 

但是當我把鼠標放在.cb要素之一其他人下去！ 你可以看到演示Here。有人如何阻止其他元素下降？

Answer 1

刪除display: inline-block;從.base類，並使其浮動到左邊float: left;。 這裏的固定演示http://jsfiddle.net/pTCFL/2/