один элемент <A>в нижнем колонтитуле не реагирует на зависание или щелчки - PullRequest
Новая
       38

один элемент <A>в нижнем колонтитуле не реагирует на зависание или щелчки

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

Один элемент не отвечает из трех в моем дополнительном навигационном меню, которое содержится в нижнем колонтитуле. Верхняя и нижняя ссылки работают, когда я наводю на них курсор, но средняя, ​​кажется, по какой-то причине не обнаруживает, что я склонен над опцией.

HTML элемента нижнего колонтитула и меню: 

<footer>
  <ul class="social">
    <li class="social"> <a href="https://www.facebook.com/Aki-Weininger-104277784411418/" id="profile-link"
        target="https://www.facebook.com/Aki-Weininger-104277784411418/"> <i class="fab fa-facebook-f"> </i> </a>
    </li>
    <li class="social"> <a href="https://www.instagram.com/akiweininger/?hl=en" id="instagram-link"
        target="https://www.instagram.com/akiweininger/?hl=en"> <i class="fab fa-instagram"> </i> </a> </li>
    <li class="social"> <a href="https://www.behance.net/akiweininger" id="Behance-link" target="https://www.behance.net/akiweininger">
        <i class="fab fa-behance"></i> </a> </li>
    <li class="social"> <a href="https://www.upwork.com/freelancers/~01d4ae188cd67db90c" id="Upwork-link"
        target="https://www.upwork.com/freelancers/~01d4ae188cd67db90c">
        <img class="upwork" src="https://i.imgur.com/Z02P8YO.png" alt="upwork">
      </a> </li>
  </ul> 
  <div class="navi-title">
  Navigation
  </div>
  <ul class="navi">  <li class="navi">
        <a href="PLACEHOLDER">
          Home
        </a>
      </li>
     <li class="navi">
        <a href="PLACEHOLDER">
          Works
        </a>
      </li>
     <li class="navi">
        <a href="PLACEHOLDER">
          Contact
        </a>
      </li>
  </ul> 
</footer>

CSS для элемента нижнего колонтитула и элемента меню: 

footer {
  clear: both;
  background-color: #2a7de1;
  text-align: center;
  padding: 2% 0% 1% 0%;
  margin-top: 20%;
  position: relative;
}
footer ul.social li.social {
  list-style: none;
  display: inline;
}
footer > ul.social li.social a {
  text-align: center;
  font-size: 2vw;
  margin: 0% 3% 0% 3%;
  overflow: hidden;
  text-decoration: none;
}
footer > ul.social li.social a .fab {
  color: white;
}
footer > ul.social li.social a:hover .fab {
  transform: scale(1.3);
  transition: 0.3s;
}
.upwork {
  width: 2.2%;
}
.upwork:hover {
  transform: scale(1.3);
  transition: 0.3s;
}
footer > ul.navi li.navi {
  list-style: none;
  margin: 0% 0% 0% 75%; 
  text-align: left;
  padding: 0.3%;
}
.navi-title {
  color: white;
  font-family: 'karla';
  font-size: 1.4vw;
  text-align:left; 
    margin: 0% 0% 0.5% 75%; 
  font-weight: 700;
}
footer > ul.navi li.navi a {
   text-decoration: none;
  color: white;
    font-family: 'karla';
  font-size: 1.2vw;
}
ul.social {
  position: absolute;
  margin-top: 3.8%;
}
footer > ul.navi li.navi a:hover {
text-decoration: underline;
}

Кодовое поле: https://codepen.io/daniel-albano/pen/poJydQj?editors=1100

Ответы [ 2 ]

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

Селектор элемента ниже лежит поверх ссылки. Если вы добавите ширину: 600 пикселей; к селектору элементов ниже, наведение на ссылку работает. Конечно, это не очень хорошо выглядит, но с чего-то начинать. 

ul.social {
width: 600px;
position: absolute;
margin-top: 3.8%;
}
1 голос
/ 22 февраля 2020

Проблема с вашим ul.social в нижнем колонтитуле. Я посмотрел на это в инспекторе.

enter image description here

Вы можете видеть, что это перекрывает недоступную ссылку "Работает".

enter image description here

В качестве теста я применил display: none к ul, и ссылка «Работы» снова стала активной. Мой совет - реструктурировать нижний колонтитул с помощью flexbox, стараясь не использовать абсолютное позиционирование и наложение.

...