如何禁用 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>
<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;如果您想删除搜索字段周围的框线。 -
泛舟湖上清波郎朗
如果是输入框：可以使用下面的样式。然而焦点是两个不同的 sudoclass。然而，如果将鼠标悬停在文本框上。当您单击并开始使用它时，sudo 类焦点就会启动。当您开始在输入文本框中键入内容时，焦点就会启动。从你的 css 样式中删除它li a:hover { background-color: cadetblue;}在你的 css 中添加以下内容 [type="search"]:hover,[type="search"]:focus { background-color: cadetblue; outline:none; }尝试这个 -
慕的地8271018
您可以简单地使用相同的背景颜色覆盖悬停：#nohvr:hover { background-color: darkslategray;}
随时随地看视频慕课网APP
相关分类
Html5
