【问题标题】:css unusual behaviour for :before on hovercss 异常行为:悬停之前
【发布时间】:2021-07-31 20:22:33
【问题描述】:

我有一个免费主题的 wordpress 网站:https://wordpress.org/themes/minimal-grid/

我看到一些不寻常的行为,这不是问题,我可以通过删除元素来解决,但我不知道为什么会发生这种情况并想了解它。

每篇文章的末尾都有上一篇文章和下一篇文章的链接。当我将鼠标悬停在这些上面时,元素的背景会稍微变暗。在有图像作为背景的地方,它不会消失,只会变暗。这是一个演示页面:https://5diraptor.com/todoist-task-project-manager/

不寻常的部分是似乎没有任何:hover 选择器实际上告诉它这样做,所以我想了解它为什么会发生。以下是 HTML:

<nav class="navigation post-navigation" role="navigation" aria-label="Posts">
  <h2 class="screen-reader-text">Post navigation</h2>
  <div class="nav-links">

    <div class="nav-previous">
      <a href="https://5diraptor.com/vivaldi-browser/" rel="prev">
        ::before
        <span class="meta-nav" aria-hidden="true">Previous</span>
        <span class="screen-reader-text">Previous post:</span>
        <span class="post-title">Vivaldi Browser</span>
      </a>
    </div>

    <div class="nav-next">
      <a href="https://5diraptor.com/wordpress-development/" rel="next">
        ::before
        <span class="meta-nav" aria-hidden="true">Next</span>
        <span class="screen-reader-text">Next post:</span>
        <span class="post-title">WordPress Development</span>
      </a>
    </div>

  </div>
</nav>

在这些改变背景颜色的任何元素上都没有 :hover 选择器。但是,当我在 Chrome 开发工具中删除 ::before 元素时,悬停过渡不再发生。

我不明白的是 :hover 伪元素上没有 :hover 选择器,并且没有应用与颜色相关的 CSS - 请参见屏幕截图。 mouseover 也没有事件监听器,所以我很确定这不是 Javascript。

我不能强制元素状态为伪元素悬停,所以我不确定如何进一步调试它。谁能帮我理解为什么会这样?

【问题讨论】:

  • 这是 CSS 造成的,Style.css 中的第 1503 行 .single .post-navigation .nav-next:hover a:before { /* background: rgba(0, 0, 0, 0.65); */ }

标签: html css css-selectors pseudo-element


【解决方案1】:

看到它具有父nav-previous 的悬停状态样式,并且该规则在悬停时适用于伪元素。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-01
    • 2019-01-28
    • 2021-09-10
    • 2023-03-29
    • 1970-01-01
    相关资源
    最近更新 更多