我想僅當(dāng)光標(biāo)位于搜索位置時禁用懸停效果，但仍然有效，并且也適用于其他導(dǎo)航欄選項，如主頁、新聞、聯(lián)系人?？磮D片。 想要禁用此懸停效果當(dāng)我點(diǎn)擊搜索字段時，搜索字段周圍會出現(xiàn)一條框陰影線。如何去除方框線陰影？為了更好地理解，請看圖片。 想要刪除搜索字段周圍的框線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貢獻(xiàn)1798條經(jīng)驗 獲得超3個贊
您可以執(zhí)行以下操作：
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貢獻(xiàn)1818條經(jīng)驗 獲得超3個贊
如果是輸入框：可以使用下面的樣式。
然而焦點(diǎn)是兩個不同的 sudoclass。然而，如果將鼠標(biāo)懸停在文本框上。當(dāng)您單擊并開始使用它時，sudo 類焦點(diǎn)就會啟動。當(dāng)您開始在輸入文本框中鍵入內(nèi)容時，焦點(diǎn)就會啟動。
從你的 css 樣式中刪除它
li a:hover {
background-color: cadetblue;
}
在你的 css 中添加以下內(nèi)容
[type="search"]:hover,[type="search"]:focus {
background-color: cadetblue;
outline:none;
}
嘗試這個
慕的地8271018
TA貢獻(xiàn)1796條經(jīng)驗 獲得超4個贊
您可以簡單地使用相同的背景顏色覆蓋懸停：
#nohvr:hover {
background-color: darkslategray;
}
- 4 回答
- 0 關(guān)注
- 199 瀏覽
添加回答
舉報
0/150
提交
取消