css - 2个div悬停效果，1个img模糊，1个文本悬停

Question

当我将鼠标移到图片上时，它应该模糊（通过 CSS），同时它应该出现一个文本。到目前为止，一切都很好，但是当我将鼠标移动到实际（仍然不可见）文本所在的图像上时，只会出现文本，但图像不会模糊。

http://jsfiddle.net/u8eY7/

我的代码：

    <li><div id="blurbox"><div class="blur img"><div class="img-wrap"><div class="img-info">
                 Wilkinson <br />
                 Afterglow <br />
                 RAM Records <br />
                 13.</div>
              <img src="images/cover/01-wilkinson-afterglow.png" class="hover" width="168" height="168"></div></div></div><div id="caption">

    .blur img {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    transition: 1s all;
    overflow: hidden;
    position: relative;
    z-index:11;
}


    .blur img:hover {
        -webkit-filter: blur(18px);
        overflow: hidden;
        width: 168px;
        height: 168px;
        position: relative;
        border:3px solid white;
        opacity: 0.6;
        z-index:11;
    }

    .blur img:hover .img-info {
        -webkit-filter: blur(18px);
        overflow: hidden;
        width: 168px;
        height: 168px;
        position: relative;
        border:3px solid white;
        opacity: 0.6;
        z-index:11;
    }

    .img-wrap{
        height:168px;
        overflow:hidden;
        position:relative;
        width:168px;
    }
    .img-info{
        bottom:0;
        color:#fff;
        opacity:0;
        filter: alpha(opacity = 0);
        position:absolute;
        width:100%;
    z-index:12;
    line-height: 32px;
    font-size: 26px;
    font-family: "Helvetica Neue";
    text-align: left;
    padding-left: 10px;
    padding-bottom: 18px;
    text-shadow: 0px 1px 2px rgba(150, 150, 150, 1);
}
.img-info h4, .img-info p{
padding:0 0px;
}
.img-wrap:hover .img-info{
    opacity:0.75;
    filter: alpha(opacity = 75);
    transition:opacity 1.75s;
    -moz-transition:opacity 1.75s;
    -webkit-transition:opacity 1.75s;
}

Answer 1

代替

.blur img:hover {
    -webkit-filter: blur(18px);
    overflow: hidden;
    width: 168px;
    height: 168px;
    position: relative;
    border:3px solid white;
    opacity: 0.6;
    z-index:11;
}

和

.img-wrap:hover img {
    -webkit-filter: blur(18px);
    overflow: hidden;
    width: 168px;
    height: 168px;
    position: relative;
    border:3px solid white;
    opacity: 0.6;
    z-index:11;
}

删除它，因为它永远不会被应用并且根据您的 html 结构没有用

.blur img:hover .img-info {
        -webkit-filter: blur(18px);
        overflow: hidden;
        width: 168px;
        height: 168px;
        position: relative;
        border:3px solid white;
        opacity: 0.6;
        z-index:11;
    }

我希望这是你想要的。就像您为 img-info 给出的一样，当将图像悬停在 .img-wrap 上时，图像也应该得到悬停，并且不要将类用作 hover 和 img 。编写样式时会感到困惑。