How to disable Hover effect on CSS?

user_4811946 0
Viewed 5296

I want to disable the hover effect only when the cursor are in search position but still effect and also work on other navbar options like Home, News, Contact. See the pic. want to disable this hover effect

When i chick the search field it appear a box shadow line around the search field. How can i remove the box line shadow? For better understanding see the pic. want to remove this box line around the search filed

HTML, and CSS Codes

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>

Update: When i run the code, in browser it takes little space left of that navbar in browser. How to solve it? See in pic (u see a small space left in left-side beside home icon).

want to remove the left side extra white space

css html
4 Answers

Here is what you can do:

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>

user_35643590

Your #sty style should add:

outline:none;

if you want to remove this box line around the search filed.

user_118112550

If it is for input box: you can use the following style.

hoever focus are two different sudoclasses. hoever if you mouse over the text box. when you click and start using it the sudo class focus kicks in. focus kicks in when you start typing something in your input textbox.

Remove this from your css style

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

Add the following in your css

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

try this

user_2681930

You can simply override the hover with the same background color:

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