How to debug pseudo-elements such as hover?

Question

I've been trying everything I could find on SO. Nothing is working. What I want to do is very simple and easy. I'm only wanting to highlight/change background-color of a button when the cursor is hovering but the mouseover effect is not working, no matter what I try. I will try to reproduce the environment by giving custom CSS and HTML. I also host Bootstrap and jQuery locally (not CDN) and they are both included in 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;
    }

This does not work :

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

Only works when computer is not connected to the internet, otherwise does NOT work

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

OR

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

Does not work

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

does not work

#splash .btn-link-screen:hover

does not work

#splash a:hover

What am I doing wrong and how can I debug this?

Answer 1

Well, somewhere somehow, your styles are being overwritten by others in the cascade, which means your CSS is being read before the rules you're trying to rewrite. That's all that's happening.

First thing to check: make sure your stylesheet positioned after Bootstrap in your HTML.

If that's not it, which version of Bootstrap are you using?

Also, I notice you have an id there - loginBtnHover - have you tried that? That ID gives you a lot of specificity to target that element. An ID will supercede class rules.

Debugging hover states is available in every modern browser. I could try to describe where the button is to do this, but I think it would be faster/easier to find a YouTube on it for your browser of choice. But you can do it - there are options to toggle :hover, :focus, :active, etc in this menu, and it is very helpful.