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

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

3 голосов
/ 26 марта 2020

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

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

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>

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

want to remove the left side extra white space

Ответы [ 4 ]

2 голосов
/ 26 марта 2020

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

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

Удалите это из стиля css 

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

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

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

Попробуйте это

2 голосов
/ 26 марта 2020

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

outline:none;

, если вы хотите удалить эту строку окна вокруг области поиска.

2 голосов
/ 26 марта 2020

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

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>
1 голос
/ 26 марта 2020

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

#nohvr:hover {
    background-color: darkslategray;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...