Может кто-нибудь сказать мне, почему a: hover не работает? - PullRequest
Новая
       25

Может кто-нибудь сказать мне, почему a: hover не работает?

1 голос
/ 28 июня 2019

:hover не работает, и я не знаю почему.

Вы должны знать, что я сократил свой оригинальный код до этих нескольких строк.Но каждый из них полезен как div "content".

Если я удаляю width:100%; или position:fixed;, это работает, но я не знаю почему (я не могу удалить эти строки, потому что я используюих на оригинальном веб-сайте) 

#content {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

a {
  width: 100%;
}

a:hover {
  font-size: 23pt;
}
<a>HOME</a>
<div id="content">
</div>

Ответы [ 3 ]

5 голосов
/ 28 июня 2019

Div #content извлекается из нормального потока рисования DOM из-за position:fixed и становится поверх тега привязки.

Простой способ решить эту проблему - установить отрицательное значение z-index для содержимого. 

#content {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index:-1;
}

a {
  width: 100%;

}

a:hover {
  font-size: 23pt;
}
<a>HOME</a>
<div id="content">
</div>
3 голосов
/ 28 июня 2019

Это потому, что элемент fixed выше вашего <a>.Поставь z-index за это. 

#content {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .3);
    z-index: 5;
}

a {
    width: 100%;
    position: relative;
    z-index: 6;
}

a:hover {
    font-size: 23pt;
}
<a>HOME</a>
<div id="content">
</div>
0 голосов
/ 28 июня 2019

Просто переместите свой якорь, который будет обработан после вашего фиксированного div, и установите для своего якоря значение position: absolute, чтобы его можно было отобразить на div 

#content {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

a {
  position: absolute;
  width: 100%;
}

a:hover {
  font-size: 23pt;
}
<div id="content">
</div>
<a>HOME</a>

Работа с несколькими возможными z-индексами (которая также, кажется, решает эту проблему в первый раз) - это немного сложно при установке z-индексов для нескольких элементов и может привести к Вы попадете в нежелательные ситуации, как только начнете добавлять все больше и больше элементов в свой домен, и будете вынуждены устанавливать конкретные z-индексы для каждого нового элемента (стараясь каждый раз менять номер z-индекса, чтобы избежать новых ситуаций "перекрывающихся элементов").

...