Как отлаживать псевдоэлементы, такие как hover? - PullRequest
Новая
       37

Как отлаживать псевдоэлементы, такие как hover?

0 голосов
/ 01 февраля 2020

Я пробовал все, что мог найти на SO. Ничего не работает То, что я хочу сделать, очень просто и легко. Я только хочу выделить / изменить цвет фона кнопки, когда курсор наведен, но эффект наведения мыши не работает, что бы я ни пытался. Я постараюсь воспроизвести окружение, предоставив пользовательские CSS и HTML. Я также размещаю Bootstrap и jQuery локально (не CDN), и они оба включены в индекс. 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
}

Работает только, когда компьютер не подключен к inte rnet, в противном случае НЕ работает 

.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 Ответ

1 голос
/ 01 февраля 2020

Ну, где-то как-то ваши стили переписываются другими в каскаде, что означает, что ваш CSS читается перед правилами, которые вы пытаетесь переписать. Это все, что происходит.

Первое, что нужно проверить: убедитесь, что ваша таблица стилей расположена после Bootstrap в вашем HTML.

Если это не так, то какая версия Bootstrap вы? используя?

Кроме того, я заметил, что у вас есть идентификатор - loginBtnHover - вы пробовали это? Этот идентификатор дает вам много специфичности для этого элемента. Идентификатор заменит правила класса.

Отладка состояний наведения доступна в каждом современном браузере. Я мог бы попытаться описать, где находится кнопка, чтобы сделать это, но я думаю, что было бы быстрее / проще найти на нем YouTube для вашего браузера. Но вы можете сделать это - есть опции для переключения: hover,: focus,: active, et c в этом меню, и это очень полезно.

...