Эффект наведения на окно поиска должен быть отключен - PullRequest
Новая
       111

Эффект наведения на окно поиска должен быть отключен

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

Я пытаюсь исправить проблему с эффектом зависания здесь, в моем учебном проекте, но этого не происходит. Не должно быть эффекта наведения на поле поиска li. Любая помощь будет оценена по достоинству! Спасибо!

Я сделал все эти классы, чтобы разделить его, а не напрямую нацеливать li. Однажды я также поменял местами li, и все заработало. Но валидатор HTML указал на это как на ошибку ... хм и да, мы не можем поместить div в ul.

Любая помощь будет принята с благодарностью.

Спасибо!

Вот часть HTML: 

 nav ul {
  display: flex;
  padding-inline-start: 40px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: fit-content;
  border-radius: 4px;
  border: 1px solid rgb(87, 86, 86);
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
  font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial,
    Verdana, sans-serif;
  top: 110px;
  left: 200px;
}

.store,.mac,.ipod,.iphone,.ipad,.itunes,.support,.appleLogoInNavBar {
  width: 102px;
  height: 36px;
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
  cursor: pointer;
}

nav li a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  text-shadow: 0px -1px black;
}

.searchLi{
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
}

.navBar li:hover {
  background:
    linear-gradient(rgb(97, 96, 96),
      rgb(51, 50, 50),
      rgb(49, 49, 49));
}
 <nav class="navBar">
        <ul>
            <li class="appleLogoInNavBar">
                <a href="#">
                    <img src="images/AppleLogo.png" alt="Apple Logo">
                </a>
            </li>
                    <li class="store"><a href="#">Store</a></li>
                    <li class="mac"><a href="#">Mac</a></li>
                    <li class="ipod"><a href="#">iPod</a></li>
                    <li class="iphone"><a href="#">iPhone</a></li>
                    <li class="ipad"><a href="#">iPad</a></li>
                    <li class="itunes"><a href="#">iTunes</a></li>
                    <li class="support"><a href="#">Support</a></li>
                    <li class="searchLi"><input class="searchInput" type="search"></li>
        </ul>
    </nav>

Спасибо!

Ответы [ 2 ]

2 голосов
/ 20 июня 2020

Один из вариантов - изменить селектор .navBar li:hover в вашем CSS на .navBar li:not(.searchLi):hover. 

nav ul {
  display: flex;
  padding-inline-start: 40px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: fit-content;
  border-radius: 4px;
  border: 1px solid rgb(87, 86, 86);
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
  font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial,
    Verdana, sans-serif;
  top: 110px;
  left: 200px;
}

.store,.mac,.ipod,.iphone,.ipad,.itunes,.support,.appleLogoInNavBar {
  width: 102px;
  height: 36px;
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
  cursor: pointer;
}

nav li a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  text-shadow: 0px -1px black;
}

.searchLi{
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
}

.navBar li:not(.searchLi):hover {
  background:
    linear-gradient(rgb(97, 96, 96),
      rgb(51, 50, 50),
      rgb(49, 49, 49));
}
<nav class="navBar">
        <ul>
            <li class="appleLogoInNavBar">
                <a href="#">
                    <img src="images/AppleLogo.png" alt="Apple Logo">
                </a>
            </li>
                    <li class="store"><a href="#">Store</a></li>
                    <li class="mac"><a href="#">Mac</a></li>
                    <li class="ipod"><a href="#">iPod</a></li>
                    <li class="iphone"><a href="#">iPhone</a></li>
                    <li class="ipad"><a href="#">iPad</a></li>
                    <li class="itunes"><a href="#">iTunes</a></li>
                    <li class="support"><a href="#">Support</a></li>
                    <li class="searchLi"><input class="searchInput" type="search"></li>
        </ul>
    </nav>
1 голос
/ 21 июня 2020

Вы можете использовать этот селектор .navBar ul li:not(:last-child):hover, который выбирает все элементы li, но НЕ последний. 

nav ul {
  display: flex;
  padding-inline-start: 40px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: fit-content;
  border-radius: 4px;
  border: 1px solid rgb(87, 86, 86);
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
  font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial,
    Verdana, sans-serif;
  top: 110px;
  left: 200px;
}

.store,.mac,.ipod,.iphone,.ipad,.itunes,.support,.appleLogoInNavBar {
  width: 102px;
  height: 36px;
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
  cursor: pointer;
}

nav li a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  text-shadow: 0px -1px black;
}

.searchLi{
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
}

.navBar ul li:not(:last-child):hover {
  background:
    linear-gradient(rgb(97, 96, 96),
      rgb(51, 50, 50),
      rgb(49, 49, 49));
}
<nav class="navBar">
        <ul>
            <li class="appleLogoInNavBar">
                <a href="#">
                    <img src="images/AppleLogo.png" alt="Apple Logo">
                </a>
            </li>
                    <li class="store"><a href="#">Store</a></li>
                    <li class="mac"><a href="#">Mac</a></li>
                    <li class="ipod"><a href="#">iPod</a></li>
                    <li class="iphone"><a href="#">iPhone</a></li>
                    <li class="ipad"><a href="#">iPad</a></li>
                    <li class="itunes"><a href="#">iTunes</a></li>
                    <li class="support"><a href="#">Support</a></li>
                    <li class="searchLi"><input class="searchInput" type="search"></li>
        </ul>
    </nav>
...