在悬停时增加宽度，在方形填充上-top:100% div

在悬停时增加宽度，可以通过CSS中的:hover伪类来实现。通过设置:hover伪类的样式，可以在鼠标悬停在元素上时改变元素的宽度。

例如，如果要在悬停时增加一个方形填充的宽度，可以使用以下CSS代码：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 0.3s ease; /* 添加过渡效果 */
}

div:hover {
  width: 200px;
}

上述代码中，div元素的初始宽度为100px，当鼠标悬停在div元素上时，宽度会过渡地增加到200px。通过使用:hover伪类和transition属性，可以实现平滑的过渡效果。

这种技术可以应用于各种场景，例如在导航菜单中，当鼠标悬停在菜单项上时，可以增加菜单项的宽度以突出显示当前选中的项。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）

腾讯云云服务器（Cloud Virtual Machine，CVM）是腾讯云提供的一种弹性、安全可靠的云计算服务。它基于腾讯自主研发的硬件设备，提供了多种配置和规格的云服务器实例，满足不同业务场景的需求。

产品介绍链接地址：腾讯云云服务器（CVM）