我想仅当光标位于搜索位置时禁用悬停效果，但仍然有效，并且也适用于其他导航栏选项，如主页、新闻、联系人。看图片。 想要禁用此悬停效果当我点击搜索字段时，搜索字段周围会出现一条框阴影线。如何去除方框线阴影？为了更好地理解，请看图片。 想要删除搜索字段周围的框线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 回答
呼如林
TA贡献1798条经验 获得超3个赞
您可以执行以下操作：
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>
泛舟湖上清波郎朗
TA贡献1818条经验 获得超3个赞
如果是输入框：可以使用下面的样式。
然而焦点是两个不同的 sudoclass。然而，如果将鼠标悬停在文本框上。当您单击并开始使用它时，sudo 类焦点就会启动。当您开始在输入文本框中键入内容时，焦点就会启动。
从你的 css 样式中删除它
li a:hover {
background-color: cadetblue;
}
在你的 css 中添加以下内容
[type="search"]:hover,[type="search"]:focus {
background-color: cadetblue;
outline:none;
}
尝试这个
- 4 回答
- 0 关注
- 149 浏览
添加回答
举报
0/150
提交
取消