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

从 .base 类中删除display: inline-block;并将其浮动到左侧float: left;。这是固定演示http://jsfiddle.net/pTCFL/2/

CSS3过渡改变了另一个元素的边缘

1 个答案: