CSS：奇怪的框出现在 :hover 之后

Question

我正在摆弄 CSS/HTML/PHP，我有一个 :hover 来更改背景颜色，但是当我将光标悬停在导航窗格上时（.navright 只是一类列表），有奇怪的灰色框出现在右上角。

这种情况并不总是发生，但我注意到如果我将光标缓慢移动到元素上，则会出现该框。如果我将鼠标快速移动到元素上，它就不会出现。但是，一旦它出现，它就会停留在那里，我无法解决这个问题！

这是我的代码：

.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;
}

>

Answer 1

问题取决于您分配给* 的overflow: scroll; 属性（页面上的所有元素）。出于某种原因，这会在 <a> 元素之外呈现奇怪的形状。不太清楚为什么，但解决方案如下：

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

1. 从* 选择器中删除overflow: scroll;。
2. 为确保菜单仍保持其初始大小，请在 .navbarTop 元素上添加一个 clear 修复作为伪选择器，如下所示：

（您可以通过几种不同的方式应用clear 修复，但这种方式侵入性较小）

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

完成此操作后，您需要添加一些小的尺寸调整以修复链接的高度，这应该可以解决您的问题。

---

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

#webpage {
	background-color: #efefef;
}

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

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

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

	min-width: 40em;
}

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

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

	padding: 10px 40px;

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

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

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

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

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

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

Answer 2

从* 选择器中删除overflow: scroll