如何在移動到子元素後保持背景圖像模糊

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