首先,很抱歉,如果这个问题已经回答,但我找不到任何地方。

将鼠标悬停在div上时,我试图获得一个平滑的过渡。在该div的顶部是另一个div,在悬停时可以看到。过渡似乎并没有解决问题,那么我该如何实现呢? (用jQuery代替CSS或其他/更好的代码?)

也许还有另一种方法,希望你们能帮助我。

HTML:

<ul>
<li>
    <div class="hover">
        <a href="#">
            <p>Test</p>
        </a>
    </div>
    <img src="#" alt="img" />
    <div class="text">
        <p>Test</p>
    </div>
</li>
</ul>


CSS:

body     {    background-color: #eee;
}

ul  {       margin: 0;
            padding: 0;
            list-style: none;}

ul li     { width: 30.33%;
            height: auto;
            margin-right: 3%;
            padding: 5px;
            background-color: #fff;
            float: left;
            position: relative;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;}

ul li img     { width: 100%;
                max-height: 100%;
                z-index: 1;
                background-color: #ddd;
                border: 0;}

.text       {   width: 100%;
                padding-top: 7%;}

.text p     {   margin: 0 10px;
                padding-bottom: 7%;}

.hover  {   height: 100%;
            background-color: #333;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            display: none;}

.hover a    {   width:100%;
                height: 100%;
                margin: 0;
                padding: 25px;
                display: block;
                color: #fff;
                text-decoration: none;
                box-sizing:border-box;
                -moz-box-sizing:border-box;
                -webkit-box-sizing:border-box;}

ul li:hover > .hover     {  display: block;
                            -webkit-transition: all 0.2s ease;
                            -moz-transition: all 0.2s ease;
                            transition: all 0.2s ease;}


这是代码:http://jsfiddle.net/HAFEx/

提前致谢!

最佳答案

display:block不受过渡影响。
而是使用不透明度。

.hover  {   height: 100%;
            background-color: #333;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            opacity:0;
}


ul li:hover > .hover{
    display: block;
    opacity:1;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

http://jsfiddle.net/Rjq3y/

关于css - 将鼠标悬停在底层div上时激活div-CSS过渡不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25021296/

10-12 12:50
查看更多