如何禁用 CSS 上的懸停效果？
[英]How to disable Hover effect on 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>更新：當我運行代碼時，在瀏覽器中，瀏覽器中導航欄的剩余空間很小。 如何解決？ 請參見圖片（您會在主頁圖標左側看到一個小空間）。
4 個解決方案
解決方案1
3 已采納 2020-03-26 09:37:28
您可以執行以下操作：
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>
解決方案2
2 2020-03-26 09:37:58
你的#sty風格應該添加：
outline:none;
如果要刪除搜索字段周圍的此框線。
解決方案3
2 2020-03-26 09:42:38
如果是用於輸入框：您可以使用以下樣式。
但是重點是兩個不同的sudoclasses。 如果您將鼠標懸停在文本框上。 當您單擊並開始使用它時，sudo 類的焦點就會啟動。當您開始在輸入文本框中鍵入內容時，焦點就會啟動。
從您的 css 樣式中刪除它
li a:hover {
background-color: cadetblue;
}
在你的css中添加以下內容
[type="search"]:hover,[type="search"]:focus {
background-color: cadetblue;
outline:none;
}
嘗試這個
解決方案4
1 2020-03-26 09:39:22
您可以簡單地使用相同的背景顏色覆蓋懸停：
#nohvr:hover {
background-color: darkslategray;
}
對於自定義按鈕，當ng disabled為true時，禁用css懸停效果
[英]Disable css hover effect when ng disabled is true for custom button
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.