html - CSS 悬停不显示

Question

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

行得通。

然后，我将 CSS :hover 选择器添加到 新 CSS 规则，将模糊过滤器更改为 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"

Answer 1

您还没有添加 :hover 伪类。

#bgimage:hover {
  /* the styles you want to display on hover */
}