Question

首先，我很抱歉，如果这个问题已经得到解答，但我无法在任何地方找到它。

当我将鼠标悬停在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/

提前致谢！

Answer 1

有些事情需要改变。首先，您无法为display属性设置动画，因此您应该在悬停时切换不透明度。

其次，您应该在.hover上应用转换，而不仅仅是parent:hover .hover，以便它可以双向转换。

使用这两项改进（以及代码的某些格式），您将获得this result

.hover {
    transition: all 0.2s ease;
    opacity:0;
    ... Other properties ...
}

Answer 2

您无法转换css display。尝试不透明度。 http://jsfiddle.net/HAFEx/2/

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

Answer 3

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/

Answer 4

您还可以jquery为display：none属性设置动画。

$("li").mouseover(function(){
 $(".hover").fadeIn(1000);
});

$(".hover").mouseout(function(){
 $(".hover").fadeOut(1000);
});

查看此codepen。 http://codepen.io/anon/pen/rqozA

Answer 5

display属性是数字或十六进制值，因此无法进行补间。在这种情况下，您不能简单地使用悬停状态不透明度：0。

两个解决方法是Javascript（凌乱）和使用CSS Keyframe动画。 http://hschwarz77.wordpress.com/2013/10/16/css-transition-from-display-none-to-display-block-on-hover/

据我所知，这些是将div完全隐藏（并且无法使用......可见性：隐藏占据空间）和淡入的唯一解决方案。

将鼠标悬停在底层div上时激活div - CSS转换不起作用

5 个答案: