如何调试悬停等伪元素？

Posted 2023-03-06

【中文标题】如何调试悬停等伪元素？

【英文标题】：How to debug pseudo-elements such as hover?

【发布时间】：2020-05-17 17:31:25

【问题描述】：

我一直在尝试一切我能在 SO 上找到的东西。没有任何工作。我想做的非常简单易行。我只想在光标悬停但鼠标悬停效果不起作用时突出显示/更改按钮的背景颜色，无论我尝试什么。我将尝试通过提供自定义 CSS 和 html 来重现环境。我还在本地（不是 CDN）托管 Bootstrap 和 jQuery，它们都包含在 index.html 中。

index.html

    <section class="sectionscreen" id="splash">
    <div class="col-md-12">
    <div class="row">
    <div class="form">
    <div class="center-text-screen">
    <a id="loginBtnHover" href="login.html" class="btn-link-screen btn" data-translate="log_in">Login</a>
    </div>
    </div>
    </div>
</div>
</section>

css

html,
body 
    margin: 0;
    font-size: 100%;
    font-family: 'Lato', sans-serif;
    background: #fff;
    width:100%;
    height:100%;


body a 
    text-decoration: none;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    font-family: 'Lato', sans-serif;

body 
    font: 1.3rem/1 "Avenir LT W02 45 Book",sans-serif;
    color: #5c5c5f;

body img 
    max-width: 100%;


a
    text-decoration: none;
    color: inherit !important;

a:hover
    text-decoration: none !important;

    #splash
          background-image: url("../images/splash.png"); /* The image used */
          background-color: whitesmoke; /* Used if the image is unavailable */
          height: 100%; /* You must set a specified height */
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          background-size: cover; /* Resize the background image to cover the entire container */
          text-align: center;
          padding: 2.5%;
    
    .center-text-screen
      display:grid;
      position: fixed; 
      left: 0; 
      right: 0; 
      margin-left: auto; 
      margin-right: auto; 
      width: 100%; /* Need a specific value to work */
      /*height:200px !important;*/
      bottom:8% !important;
      color: #302b70;
    
    .btn-link-screen
      background:#d9d9d9;
      margin-bottom:1.5% !important;
      width: 170px;
      left: 0; 
      right: 0; 
      margin-left: auto; 
      margin-right: auto; 
      border-radius:50px !important;
      color:#a6a6a6 !important;
    

这不起作用：

.btn-link-screen:hover
 background-color:gold !important

仅在电脑未联网时有效，否则无效

.center-text-screen .btn-link-screen:hover
     background-color:gold !important;//works when not connected to internet

或

.center-text-screen a:hover
     background-color:gold !important;//works when not connected to internet

不工作

#splash .center-text-screen .btn-link-screen:hover

没用

#splash .btn-link-screen:hover

没用

#splash a:hover

我做错了什么，我该如何调试？

【参考方案1】：

嗯，不知何故，您的样式在级联中被其他人覆盖，这意味着您的 CSS 在您尝试重写的规则之前被读取。这就是正在发生的一切。

首先要检查：确保您的样式表在 HTML 中位于 Bootstrap 之后。

如果不是这样，您使用的是哪个版本的 Bootstrap？

另外，我注意到你有一个 id - loginBtnHover - 你试过吗？该 ID 为您提供了很多针对该元素的特异性。 ID 将取代类规则。

每个现代浏览器都可以调试悬停状态。我可以尝试描述按钮在哪里执行此操作，但我认为在其上为您选择的浏览器找到 YouTube 会更快/更容易。但你可以做到——在这个菜单中有切换 :hover、:focus、:active 等的选项，非常有用。

【讨论】：

老兄！你解决了我的地狱。 bootstrap.css 在自定义 css 之后。在引导程序和繁荣解决之后，我放置了我的自定义样式表！感谢您的输入！

太棒了！我已经做过几次了。如果您发现自己需要 !important，请仔细检查您的 CSS 文件顺序。