CSS：奇怪的框出現在：hover

我擺弄CSS/HTML/PHP，我有一個：懸停改變背景顏色，但是當我將光標懸停在導航窗格上時（.navright只是一個類列表），右上角會出現奇怪的灰色框。CSS：奇怪的框出現在：hover

這不會一直髮生，但我注意到，如果我將光標緩慢移動到元素上，則會出現該框。如果我將鼠標快速移動到元素上，則不會出現。但是，一旦出現，它就停留在那裏，我一直無法解決這個問題！

這是我的代碼：

.navright a { 
    display: block; 

    text-align: left; 

    width: 180px; 
    height: 24px; 

    font-size: 15px; 
    font-weight: 500px; 
    font-family: "Helvetica Neue", Helvetica; 
    color: #141414; 

    padding: 3px 0px; 
    margin: 2px 10px; 
    text-decoration: none; 
} 

.navright:hover { 
    background-color: #e0e0e0; 
}

< < >>

來源

2017-08-12 eyeofthetiger

你檢查，刪除overflow: scroll如果對於'任何CSS規則：hover'的父元素？或按元素類型？ – gespinha

這是該分支的唯一一個 – eyeofthetiger

我在Apache上本地運行此程序。我不會想象這是一個問題，但我不能爲我的生活弄清楚爲什麼會發生這種情況 – eyeofthetiger

問題依賴於你分配給*的overflow: scroll;財產（所有頁面上的元素）。出於某種原因，這會在元素外部呈現奇怪的形狀。真的不知道爲什麼，但解決的辦法如下：

https://jsfiddle.net/hyk4jtwe/5/

從*選擇刪除overflow: scroll;。
爲了確保菜單仍然保持其初始大小，添加一個clear修復作爲僞選擇的.navbarTop元素，像這樣：

（你可以用幾種不同的方式應用clear修復，但是這是少侵入性的方式）

.navbarTop:after{ 
    clear: both; 
    content: ''; 
    display: block; 
}

此步驟完成後，你需要添加一些小的尺寸調整，以修復鏈接的HIGHT，並應解決您的問題。

* { 
 
\t box-sizing: border-box; 
 
\t /* Reset the defaults */ 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
#webpage { 
 
\t background-color: #efefef; 
 
} 
 

 
#navmenu { 
 
\t height: 55px; 
 
\t margin-bottom: 20px; 
 
} 
 

 
.navbarTop:after{ 
 
    clear: both; 
 
    content: ''; 
 
    display: block; 
 
} 
 

 
.navbarTop { 
 
\t list-style-type: none; 
 
\t background-color: royalblue; 
 

 
\t min-width: 40em; 
 
} 
 

 
.navtop { 
 
\t min-width: 100px; 
 
\t min-height: 40px; 
 
\t height: 100%; 
 
\t margin-top: 5px 0px; 
 
\t float: left; 
 
\t padding: 5px 0px; 
 
} 
 

 
#buddyTitle, .navtop a { 
 
\t display: inline-block; 
 
\t color: white; 
 

 
\t padding: 10px 40px; 
 

 
\t text-decoration: none; 
 
\t text-align: center; 
 
} 
 

 
#buddyTitle { 
 
\t float: left; 
 
\t min-width: 150px; 
 
\t min-height: 40px; 
 

 
\t font-weight: 580; 
 
\t font-size: 35px; 
 
\t font-family: Garamond; 
 
\t letter-spacing: 0.25rem; 
 
} 
 

 
.navtop a { 
 
\t font-weight: 500; 
 
\t font-size: 20px; 
 
\t font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica; 
 
\t letter-spacing: 0.05rem; 
 
} 
 

 
.navtop:hover { 
 
\t background-color: #314fa7; 
 
\t -webkit-transition: background-color .7s; 
 
    -moz-transition: background-color .7s; 
 
    -o-transition: background-color .7s; 
 
    transition: background-color .7s; 
 
}

\t <body id = "webpage"> 
 
\t \t <!-- Navigation pane on the top with the header --> 
 
\t \t <div id = "navmenu"> 
 
\t \t \t <ul class = "navbarTop"> 
 
\t \t \t \t <li id = "buddyTitle">Title</li> 
 
\t \t \t \t <li class = "navtop"><a href = "example.com">Test1</a></li> 
 
\t \t \t \t <li class = "navtop"><a href = "example.com">Test2</a></li> 
 
     <li class = "navtop"><a href = "example.com">Test3</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
    </body>

來源

2017-08-13 00:16:42 gespinha

完美解決了問題！謝謝。我只想知道爲什麼溢出會導致這種問題 – eyeofthetiger

有時像這樣的問題是微小的渲染錯誤。我們不知道。但我強烈建議儘可能遵循HTML和CSS規範，以防止這樣的未知問題。應該非常小心地使用'*'選擇器。但我很高興這解決了你的問題！ – gespinha

非常感謝（我還在學習，你可能會說）！ – eyeofthetiger

從*選擇

來源

2017-08-13 00:45:51

CSS：奇怪的框出現在：hover

回答

相關問題