Question

此网站的标题会在悬停时展开，显示隐藏的span。但是，假设要平滑地显示的图像有点落在标题之外。这很难解释，只需看看：http://jsfiddle.net/56t9r/

.header {
    background:#FFF;
    border-bottom:1px solid gray;
    box-shadow:0 0 10px;
    height:70px;
    position:fixed;
    top:0px;
    width:100%;
    z-index:2;
    transition: height 1s ease;
}
.header:hover {
    height: 120px;
    transition: height 1s ease;
}
.kielet {
    top:0px;
    width:100%;
    background: rgb(255, 255, 255);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(229, 229, 229, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
    /* IE6-9 */
    padding:0px;
    height: 0px;
    box-shadow: 0 4px 2px -2px gray;
    color: red;
    transition: height 1s ease;
}
.kielet nav {
    text-align: center;
    height: 0px;
    position: static;
    transition: height 1s ease;
}
.header:hover > .kielet nav {
    height:50px;
    position: static;
}
.kielet a {
    display: inline;
    left: 0px;
}

Answer 1

<强> Fiddle

.header {
  overflow: hidden;
  ...
}

.header ~~：悬停~~ **

.header .kielet nav {
    height: 50px;
    position: static;
}

HTML / CSS - 让孩子留在家长？

1 个答案: