Question

我的背景图像悬停在图像上时会模糊。然而，当我将鼠标悬停在背景图像顶部的其他div上时，模糊消失了。我理解为什么会发生这种情况，但我不确定是否有一种简单的方法来解决它。我想保持模糊，即使我移动到父级内的其他div，只有在离开父div时才删除模糊。

    .image-fullbg {  
    box-sizing: border-box;     
    width: 100%;
    height: 100%;
        max-height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;   
    box-sizing: border-box;      
    position: absolute;
    z-index: -1;
    background-attachment: fixed;
        background-position: center center;
    -webkit-transition: all 0.3s ease;
    }

.image-fullbg:hover, 
.image-fullbg:focus {
    -webkit-filter: blur(5px)
}

Answer 1

您只需使用

即可

[parent selector]:hover .image-fullbg { -webkit-filter: blur(5px); }

移动到子元素后，如何在悬停后保持背景图像模糊

1 个答案: