我想僅當光標位于搜索位置時禁用懸停效果，但仍然有效，并且也適用于其他導航欄選項，如主頁、新聞、聯系人?？磮D片。 想要禁用此懸停效果當我點擊搜索字段時，搜索字段周圍會出現一條框陰影線。如何去除方框線陰影？為了更好地理解，請看圖片。 想要刪除搜索字段周圍的框線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 關注
- 202 瀏覽
添加回答
舉報
0/150
提交
取消