Css 2个divs悬停效果，一个img模糊，另一个文本悬停

当我将鼠标移到图片上时，它会模糊（通过CSS），同时它会显示文本。到目前为止，还不错，但当我将鼠标移动到实际（仍然不可见）文本所在的图像上时，只会显示文本，但图像不会模糊

我的代码：

    <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;
}

威尔金森

余辉

RAM记录

13
.模糊图像{
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
-ms转换：所有1秒轻松；
过渡：所有的1容易；
过渡：1s全部；
溢出：隐藏；
位置：相对位置；
z指数：11；
}
.模糊图像：悬停{
-webkit过滤器：模糊（18px）；
溢出：隐藏；
宽度：168px；
高度：168px；
位置：相对位置；
边框：3倍纯白；
不透明度：0.6；
z指数：11；
}
.blur img:hover.img info{
-webkit过滤器：模糊（18px）；
溢出：隐藏；
宽度：168px；
高度：168px；
位置：相对位置；
边框：3倍纯白；
不透明度：0.6；
z指数：11；
}
.img包装{
高度：168px；
溢出：隐藏；
位置：相对位置；
宽度：168px；
}
.img信息{
底部：0；
颜色：#fff；
不透明度：0；
过滤器：alpha（不透明度=0）；
位置：绝对位置；
宽度：100%；
z指数：12；
线高：32px；
字号：26px；
字体系列：“Helvetica Neue”；
文本对齐：左对齐；
左侧填充：10px；
垫底：18px；
文本阴影：0px 1px 2px rgba（150,150,150,1）；
}
.img info h4、.img info p{
填充：0 0px；
}
.img wrap:hover.img info{
不透明度：0.75；
过滤器：α（不透明度=75）；
过渡：不透明度1.75s；
-moz过渡：不透明度1.75s；
-webkit转换：不透明度1.75s；
}

更换

.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;
}

与

删除它，因为它将永远不会被应用，并且根据您的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信息提供的一样，图像在悬停在.img wrap上时也应该获得悬停，并且不要将类用作hover和img。当您编写样式时，可能会感到困惑。

您能为代码提供一个吗？您能提供一个吗？当我试图重现你所说的话时，我不确定我是否理解了这个问题

.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;
    }