Question

我想要创建的效果是当我将鼠标悬停在我的图像上时，它会模糊图像并在其上显示一些文字。到目前为止，我能够模糊图像并在其上显示文本，唯一的问题是文本也模糊不清。如何防止文本模糊？任何建议赞赏

HTML

<div class="row3">
            <div class="six left">
            <p class = "imgDescription">Description yo</p>
            </div><!--closing column 6-->

            <div class="three middle">
            </div><!--closing column 3-->

            <div class="three right">
            </div><!--closing column 3-->
        </div>

CSS

.row3 .left{
    background: url('zombiegame.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transition: all 1s ease;
    -moz-webkit-transition: all 1s ease;
    -ms-webkit-transition: all 1s ease;
    -o-webkit-transition: all 1s ease;
    transition: all 1s ease;
}

.imgDescription{
    color: white;
    visibility: hidden;
    opacity: 0;
}

.row3 .left:hover{
    background: url('zombiegame.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-filter: blur(1px);
}

.row3 .left:hover .imgDescription{
    visibility: visible;
    opacity: 1;
}

Answer 1

我找到了一种方法，你可以试试，而不是使用css并在p元素上取消气泡时定义模糊事件，那么父模糊事件不会影响子元素。

如何在悬停时模糊背景图像并在其上显示文本

1 个答案: