2个div悬停效果，一个图像模糊，另一个文本悬停答案

【问题标题】：2 divs hover effect, one img blur, other one text hover2个div悬停效果，一个图像模糊，另一个文本悬停
【发布时间】：2013-10-22 10:43:32
【问题描述】：

当我将鼠标移到图片上时，它应该会模糊（通过 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;
}

【问题讨论】：

你能提供一个jsfiddle.net你的代码吗？
你能提供一个fiddle吗？当我试图重现你所说的内容时，我不确定我是否遵循了这个问题
对不起jsfiddle.net/u8eY7

标签： css html hover blur

【解决方案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 。编写样式时会很混乱。

【讨论】：