html - 在悬停子项上显示父级 div

Question

Fiddle

当悬停在 .blur 或 white section caption div 上时，只有白色部分应该覆盖整个 div。如何做到这一点？但目前，当鼠标悬停在图像上时，这种效果正在发生。

.cuadro_intro_hover:hover .caption{
    opacity: 1;
    transform: translateY(-200px);
    -webkit-transform:translateY(-200px);
    -moz-transform:translateY(-200px);
    -ms-transform:translateY(-200px);
    -o-transform:translateY(-200px);
            } 

<div id="myCarousel" class="carousel slide cuadro_intro_hover" style="height:300px;">
    <div class="carousel-inner">
        <div class="active item">
            <div class="fill" style="background-image:url('https://lh3.googleusercontent.com/xnls2cFDnYU1ubdQ-m6suh2-wZnBfZ8nMNwt_X_8NHiPLtIiY5KSk0HnhvhIi4-ic_LBqi2m6Q=s700-h280-e365-rw');">
                <div class="container">
                </div>
            </div> 
            <div class="caption">
                <div class="blur" style="margin-top: 50px;"></div>
                    <div class="caption-text" style="top: 40px;"> 
                        <p style="padding: 30px 15px;">Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p> 
                    </div>
                </div> 
            </div>


        </div>
        <div class="pull-center">
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
        </div>
    </div> 
</div>

Answer 1

你的代码的问题在于这一行:

<div class="blur" style="margin-top: 50px;"></div>

并且标题文本行在上面的 DIV 之外。因此，它在 CSS 中不会像这样工作，除非您将标题代码移动到 Blur DIV 中，或者像“stealthwang”评论所说的那样通过 JS 制作它。

更新:检查以下代码:http://www.bootply.com/eyYNppYnrG