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

＆LT;＆LT;＆GT;＆GT;

Answer 1

该问题依赖于您分配给overflow: scroll;的{{1}}属性（页面上的所有元素）。由于某种原因，这会在*元素之外呈现奇怪的形状。不确定为什么，但解决方案如下：

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

从<a>选择器中删除overflow: scroll;。
要确保菜单仍保留其初始大小，请在*元素上添加clear修正作为伪选择器，如下所示：

（您可以通过多种不同的方式应用.navbarTop个修复程序，但这种方式不那么干扰了）

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

Answer 2

从overflow: scroll选择器

中删除*

CSS：奇怪的框出现在：悬停

2 个答案: