如何调试hover等伪元素？

Question

我一直在尝试我能在 SO 上找到的所有内容。什么都不起作用。我想做的事情非常简单和容易。我只想在光标悬停时 highlight/change 按钮的背景颜色，但无论我尝试什么，鼠标悬停效果都不起作用。我将尝试通过提供自定义 CSS 和 HTML 来重现环境。我还在本地托管 Bootstrap 和 jQuery（不是 CDN），它们都包含在 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

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

Answer 1

好吧，在某个地方，您的样式正被级联中的其他样式覆盖，这意味着您的 CSS 在您尝试重写的规则之前被读取。这就是所有发生的事情。

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

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

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

每个现代浏览器都可以调试悬停状态。我可以尝试描述执行此操作的按钮位置，但我认为需要 faster/easier 才能在其中找到适合您选择的浏览器的 YouTube。但你可以做到 - 在此菜单中有切换 :hover、:focus、:active 等的选项，这非常有帮助。

如何调试hover等伪元素？

How to debug pseudo-elements such as hover?

css

hover

mouseover