【问题标题】:CSS Hover not showingCSS 悬停不显示
【发布时间】:2017-11-16 21:04:48
【问题描述】:

好的,所以我有一个背景图像,它在 CSS 中具有 1 像素的模糊滤镜。

这行得通。

然后,我在 new 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"

【问题讨论】:

  • 另一个元素可能正在捕获悬停事件。但是,如果没有看到一些代码,我们就无法判断。您能否发布问题示例或至少提供标记和样式?
  • 让我快速编辑帖子

标签: html css filter hover


【解决方案1】:

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

【讨论】:

    【解决方案2】:

    您没有添加 CSS 的 :hover 部分,但如果我将其添加到 CSS 中,它对我有用:

    #bgimage:hover {
      filter: none;
    }
    

    【讨论】:

      猜你喜欢
      • 2012-04-07
      • 1970-01-01
      • 2018-01-16
      • 1970-01-01
      • 1970-01-01
      • 2015-06-08
      • 2018-08-11
      • 1970-01-01
      • 2014-01-30
      相关资源
      最近更新 更多