Html 当我在元素旁边悬停时，元素的悬停效果会起作用

我创建了一个带有悬停效果的简单元素，它可以改变元素的颜色，但当我在元素旁边悬停时，悬停效果会起作用并改变元素的颜色。 问题是我希望悬停元素本身时悬停效果能够正常工作。 这里是网站 所有代码都在这个GitHub存储库中

#计数器{
位置：绝对位置；
宽度：300px；
高度：235px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
字体系列：“Josefin Sans”，无衬线；
边框：黑色实心1px；
过渡：0.3s；
}
.btn_高，.btn_低{
字号：18px；
颜色：#000；
边界：无；
填充：10px 20px；
字体系列：“Josefin Sans”，无衬线；
背景：无；
大纲：无；
过渡：0.3s；
光标：指针；
}
.btn_高：悬停{
颜色：#4CAF50；
}
.btn_高：激活{
颜色：#8BC34A；
}
.btn_低：悬停{
颜色：#f44336；
}
.btn_低：激活{
颜色：#E91E63；
}
/*
（当您将鼠标悬停在数字之外时，悬停效果会起作用）
*/
#数{
字体大小：40px；
过渡：0.3s；
填充：0px；
利润率：55px 0px 20px 0px；
盒子尺寸：10px；
文本对齐：居中；
}
#号码：悬停{
颜色：#607D8B；
}

0
较高的
降低

按如下方式更新代码，使可悬停区域变小：

#计数器{
位置：绝对位置；
宽度：300px；
高度：235px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
字体系列：“Josefin Sans”，无衬线；
边框：黑色实心1px；
过渡：0.3s；
}
.btn_高，
.btn_低{
字号：18px；
颜色：#000；
边界：无；
保证金：10px 20px；/*已更改*/
字体系列：“Josefin Sans”，无衬线；
背景：无；
大纲：无；
过渡：0.3s；
光标：指针；
}
.btn_高：悬停{
颜色：#4CAF50；
}
.btn_高：激活{
颜色：#8BC34A；
}
.btn_低：悬停{
颜色：#f44336；
}
.btn_低：激活{
颜色：#E91E63；
}
/*
（当您将鼠标悬停在数字之外时，悬停效果会起作用）
*/
#数{
字体大小：40px；
过渡：0.3s；
保证金：55px自动20px；/*已更改*/
显示：表；/*已添加*/
}
#号码：悬停{
颜色：#607D8B；
}

0
较高的
降低

使用边距而不是填充“问题是我希望悬停元素本身时悬停效果才起作用。”-不，这不是实际问题。实际的问题似乎是，您将元素与其内容混淆了。如果希望0仅在其自身悬停时更改颜色，则需要将其包装到周围空间较小的元素中。现在，您在那里得到的

div

元素从一侧到另一侧覆盖了大部分框。请尝试添加

.btn\u high、.btn\u low{background color:red；}

。这将显示悬停的元素有多大。因为它们有一个

填充

，所以它比文本大。您可能想查看“CSS框模型”以了解更多信息。