如何在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>

更新:当我运行代码时,在浏览器中它只占浏览器中导航栏剩余的空间。怎么解决呢?在图片中查看(您会看到主页图标左侧的左侧有一个小空间)。

要删除左侧多余的空白

Manjuboyz

您可以执行以下操作:

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章