好的,所以我的背景图片在CSS中具有1px的模糊滤镜。

这样可行。

然后,我在新的CSS规则中添加了CSS:hover选择器,该规则将模糊滤镜更改为0。

但是,当我在浏览器上将其悬停时,它根本不会改变模糊! (我进入Google Chrome Inspect Element,并使用了强制:hover选择器的便捷功能,然后它起作用了。因此,我知道不是CSS引起了很多麻烦。)

我该如何工作?它是标题中div上的模糊过滤器。有任何想法吗?

    <header>
        <div id="bgimage"></div>
        <nav>
            <a href="home.html" title="Click to go to the homepage.">Home</a>
            <span class="divider">-</span>
            <a href="cakes.html" title="Click to see types of cakes.">Types of Cake</a>
        </nav>
        <h1>Cakes</h1>
    </header>

body header {
    width:100%;
    text-align:center;
    box-shadow:0 4px 4px 4px rgba(0,0,0,0.2);
    z-index:4;
    position:relative;
    background-color:linear-gradient(CornFlowerBlue,RoyalBlue);
}
body header div#bgimage {
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    background-image:url(hydrangea-cakes-2.jpg);
    filter:blur(1px);
    position:absolute;
    width:100%;
    height:100%;
}


HTML的重要部分是标题和div id =“ bgimage”

最佳答案

您尚未添加#bgimage:hover {/您的内容/}部分

10-08 11:47
查看更多