Как отключить эффект наведения на CSS?

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

Когда я читаю поле поиска, появляется поле тени вокруг поля поиска. Как я могу удалить тень линии коробки? Для лучшего понимания см. Рис. хотите убрать эту строку в строке поиска

HTML и CSS коды

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: darkslategray;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px;
    text-decoration: none;
}

li a:hover {
    background-color: cadetblue;
}

#sty {
    border: 2px solid cadetblue;
    border-radius: 50px;
}
 <!doctype html>
   <html lang="en">
   <head>
    <title>test</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial- 
    scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--Get your own code at fontawesome.com-->
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    
</head>
<body>
 
<ul>
    <li><a href="#home"><i class="fas fa-home"></i></a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
    <li style="float: right;"><a id="nohvr" href="#">
        <label>
            <input id="sty" type="search">
        </label>Search</a></li>
    <li style="float: right;"><a href="#">Register</a></li>
    <li style="float: right;"><a href="#">Login</a></li>
</ul>

</body>
</html>

Обновление: когда я запускаю код, в браузере он занимает мало места от этой панели навигации в браузере. Как это решить? Смотрите на рис. (Вы видите небольшое пространство слева от иконки дома).

хочу убрать с левой стороны лишние пробелы

Всего 4 ответа


Вот что вы можете сделать:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: darkslategray;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
}

li a:hover {
  background-color: cadetblue;
}

#sty {
  border: 2px solid cadetblue;
  border-radius: 50px;
  outline: none;
}

#nohvr {
  background-color: unset;
}
<body>

  <ul>
    <li><a href="#home"><i class="fas fa-home"></i></a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
    <li style="float: right;">
      <a id="nohvr" href="#">
        <label>
            <input id="sty" type="search">
        </label>Search</a>
    </li>
    <li style="float: right;"><a href="#">Register</a></li>
    <li style="float: right;"><a href="#">Login</a></li>
  </ul>

</body>


Ваш стиль #sty должен добавить:

outline:none;

если вы хотите убрать эту строку из поля поиска.


Если это для поля ввода: вы можете использовать следующий стиль.

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

Удалить это из вашего стиля CSS

li a:hover {
  background-color: cadetblue;
}

Добавьте следующее в свой CSS

 [type="search"]:hover,[type="search"]:focus {
        background-color: cadetblue;
        outline:none;
    }

попробуй это


Вы можете просто переопределить наведение на тот же цвет фона:

#nohvr:hover {
    background-color: darkslategray;
}

Есть идеи?

10000