Question

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

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上时悬停，不要使用类作为悬停和img。当你写风格时会很困惑。

2 divs悬停效果，对图像模糊，其他一个文本悬停

1 个答案: