簡體   English   中英

css 異常行為:之前在 hover

[英]css unusual behaviour for :before on hover

我有一個帶有這個免費主題的 wordpress 網站: https://wordpress.org/themes/minimal-grid/

我看到一些不尋常的行為,這不是問題,我可以通過刪除元素來修復,但我不知道為什么會發生這種情況並想了解它。

每篇文章的末尾都有上一篇和下一篇文章的鏈接。 當我 hover 超過這些時,元素的背景會稍微變暗。 在有圖像作為背景的地方,它不會消失,只會變暗。 這是一個演示頁面: 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 轉換不再發生。

我不明白的是::before偽元素上沒有:hover選擇器,並且沒有與顏色相關的 CSS 應用於此 - 參見屏幕截圖。 mouseover也沒有事件監聽器,所以我很確定這不是 Javascript。

在此處輸入圖像描述

對於偽元素,我無法將元素 state 強制為 hover,所以我不確定如何進一步調試它。 誰能幫我理解為什么會這樣?

看到它具有父nav-previous的 hover state 的樣式,並且該規則在懸停時適用於偽元素。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM