: hover не будет работать на навигационной панели, если я переместу положение <div>в центр. Зачем? - PullRequest
Новая
       27

: hover не будет работать на навигационной панели, если я переместу положение <div>в центр. Зачем?

1 голос
/ 17 июня 2020

Наведение отлично работает с этим кодом, но когда я изменяю «верх» с 50% на что-то ниже 45%, наведение курсора на панель навигации перестанет работать. Я хочу центрировать текст h1 двумя кнопками, но я не знаю, как без отключения наведения на панели навигации. 

.main-nav li:hover {
    background-color: hsla(180,50%,50%,0.28);
    transition: all 0.5s ease-in;
}
.una{
    width: 1200px;
    margin-left: 0px;
    margin-top: 0px;
}

.gitna {
    position: absolute;
    Top: 50%;
    Left: 50%;
    Transform: translate(-50%, -50%);
}
.btn:hover {
    background-color: darkslateblue;
    transition: all 0.5s ease-in;
}
 <div>
 <div class="row">
            <ul class="main-nav">
                <li><a href=""> HOME </a></li>
                <li><a href=""> ABOUT </a></li>
                <li><a href=""> PHOTOGRAPHY </a></li>
                <li><a href=""> ORGANIZER </a></li>
                <li><a href=""> CONTACT </a></li>
            </ul>
        </div>

        <div class="una gitna">
            <h1>Are you Ready?</h1>

            <div class="button">
                <a href="" class="btn btn-one">Explore</a>
                <a href="" class="btn btn-two">Other Websites</a>
            </div>
        </div>
        </div>

Пожалуйста, дайте мне знать, если мне нужно отредактировать дополнительную информацию о моем css.

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Вы все делаете правильно, просто удалите свойство css width:1200px и оно заработает. 

.main-nav li:hover {
  background-color: hsla(180, 50%, 50%, 0.28);
  transition: all 0.5s ease-in;
}

.una {
  text-align: center;
  margin-left: 0px;
  margin-top: 0px;
}

.gitna {
  position: absolute;
  Top: 50%;
  Left: 50%;
  Transform: translate(-50%, -50%);
}

.btn:hover {
  background-color: darkslateblue;
  transition: all 0.5s ease-in;
}
<div class="row">
  <ul class="main-nav">
    <li><a href=""> HOME </a></li>
    <li><a href=""> ABOUT </a></li>
    <li><a href=""> PHOTOGRAPHY </a></li>
    <li><a href=""> ORGANIZER </a></li>
    <li><a href=""> CONTACT </a></li>
  </ul>
</div>

<div class="una gitna">
  <h1>Are you Ready?</h1>

  <div class="button">
    <a href="" class="btn btn-one">Explore</a>
    <a href="" class="btn btn-two">Other Websites</a>
  </div>
</div>
0 голосов
/ 17 июня 2020

Я бы рекомендовал попробовать flexbox .

Поступая таким образом, у вас будет меньше проблем с позиционированием элементов, а также вы избежите неожиданного поведения. Кроме того, вы добьетесь быстрой реакции прямо из коробки.

Кроме того, я использовал flexbox на вашем .main-nav, чтобы продемонстрировать, как вы можете легко создать прилично выглядящую панель навигации, а также buttons .

Взгляните на мой пример. 

.main-nav {
    display: flex;
    justify-content: space-evenly;
}
.main-nav li:hover {
    background-color: hsla(180,50%,50%,0.28);
}
.main-nav li { 
    list-style: none;
    transition: all 0.3s ease-in-out;
}
.una{
    width: auto;
    margin-left: 0px;
    margin-top: 0px;
}

.gitna {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.button {
    width: 50%;
    display: flex;
    justify-content: space-evenly;
}
.btn{
    transition: all 0.3s ease-in-out;
}
.btn:hover {
    background-color: darkslateblue;
}
       <div class="row">
            <ul class="main-nav">
                <li><a href=""> HOME </a></li>
                <li><a href=""> ABOUT </a></li>
                <li><a href=""> PHOTOGRAPHY </a></li>
                <li><a href=""> ORGANIZER </a></li>
                <li><a href=""> CONTACT </a></li>
            </ul>
        </div>

        <div class="una gitna">
            <h1>Are you Ready?</h1>

            <div class="button">
                <a href="" class="btn btn-one">Explore</a>
                <a href="" class="btn btn-two">Other Websites</a>
            </div>
        </div>

Надеюсь, это поможет.

...