将鼠标悬停在底层 div 上时激活 div - CSS 过渡不起作用答案

【问题标题】：Activating div while hovering over underlaying div - CSS transition not working将鼠标悬停在底层 div 上时激活 div - CSS 过渡不起作用
【发布时间】：2014-07-29 17:18:33
【问题描述】：

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

我试图在将鼠标悬停在 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 属性。
您很可能希望将display: none 更改为opacity: 0，并将display: block 更改为opacity: 1，并进行跨浏览器（旧版IE）等效操作。
借鉴 Paulie_D 所说的话，您可以尝试改变不透明度。

标签： css hover transition

【解决方案1】：

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

其次，您应该在 .hover 上应用过渡，而不仅仅是在 parent:hover .hover 上，以便双向过渡。

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

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

【讨论】：

【解决方案2】：

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/

【讨论】：

请尽量不要发布与以前相同的答案:) 我们尽量远离重复
当我发布此评论时，其他人没有在我的浏览器上更新，抱歉...#norage

【解决方案3】：

你不能转换 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;
}

【讨论】：

【解决方案4】：

您还可以通过 jquery 为 display:none 属性设置动画。

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

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

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

【讨论】：

这与提出的问题无关

【解决方案5】：

display 属性是数字或十六进制值，因此不能补间。在这种情况下，不能简单地将悬停状态设为 opacity: 0。

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

据我所知，这些是使 div 完全隐藏（并且无法使用...visibility:hidden 占据空间）并淡入的唯一解决方案。

【讨论】：

我相信你在第一句话中忘记了“不”这个词
他确实通过 jquery 寻求解决方案。