Javascript 引导标记字段下拉项在选择时闪烁

我目前正在使用带有自动完成下拉列表的引导标记字段。但是，当您将鼠标悬停在下拉列表上时，很明显文本会轻微移动。有没有办法解决这个问题，使文本在悬停时不会移动

请运行代码以查看问题。下拉列表处于模式中。非常感谢你的帮助

启动演示模式 .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front{ z索引：1051；//或更多 } .令牌输入{ 宽度：25V分钟！重要； } .tokenfield.token{ 高度：25px； } .ui菜单项包装器{ 字体系列：-apple system、BlinkMacSystemFont、Segoe UI、Roboto、Helvetica Neue、Arial、Noto Sans、Sans serif、apple Color表情符号、Segoe UI表情符号、Segoe UI符号、Noto Color表情符号； 背景色：透明； 边界：没有！重要； 文字装饰：无； } .ui菜单项{ 显示：块； 宽度：100%； 填充：0.25雷姆1.5雷姆； 明确：两者皆有； 字体大小：400； 颜色：000000； 文本对齐：继承； 空白：nowrap； 背景色：透明； 边界：0； 边界半径：0.5雷姆； } .ui菜单项：悬停，.ui菜单项：焦点{ 颜色：ffffff； 文字装饰：无； 背景色：EAF1； } .ui菜单项：悬停{ 颜色：ffffff； } .ui菜单：悬停.ui菜单项包装，.ui菜单项包装：悬停{ 背景：透明； 边界：无； } .ui菜单{边界半径：3px！重要；} .表格管制{ 身高：继承； } @介质最大宽度：600px{ .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front{ 宽度：auto！important；/*important的使用是因为令牌字段api使用内联样式*/ } } 情态标题 &时代； 关 保存更改 var sourceDataObj=[test1，test2，3tests]； $'tokenfield'。tokenfield{ 自动完成：{ 资料来源：sourceDataObj， 延误：100 }, showAutocompleteOnFocus：正确， 最小宽度：466 };

---

您的自定义CSS中的一些问题现在已修复

您有一些不需要的透明背景。 边界：没有！重要的是不工作。 .ui菜单项不需要为此使用自定义CSS样式，因为令牌字段提供的样式是响应性的。 编辑：我还添加了一个最大高度和溢出-y，如果你的下拉项目超过10+你也可以根据你的意愿调整高度

运行下面的代码段以查看它是否正常工作

$document.readyfunction{ var sourceDataObj=[test1，test2，3tests，test1，test2，3tests，test1，test2，3tests，test1，test2，3tests，test1，test2，3tests，test1，test2，3tests，test1，test2，3tests，test1，test2，3tests，test1，test2，test1，test2，3tests，]； $'tokenfield'。tokenfield{ 自动完成：{ 资料来源：sourceDataObj， 延误：100 }, showAutocompleteOnFocus：正确， 最小宽度：466 }; }; .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front{ z索引：1051；//或更多 } ui-id-1{ 溢出y：滚动； 高度：300px； } .令牌输入{ 宽度：25V分钟！重要； } .tokenfield.token{ 高度：25px； } .ui菜单项包装器{ 字体系列：-apple system、BlinkMacSystemFont、Segoe UI、Roboto、Helvetica Neue、Arial、Noto Sans、Sans serif、apple Color表情符号、Segoe UI表情符号、Segoe UI符号、Noto Color表情符号； } .ui菜单{ 边界半径：3px！重要； } .表格管制{ 身高：继承； } @介质最大宽度：600px{ .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front{ 宽度：自动！重要； /*之所以使用“重要”，是因为tokenfield api使用内联样式*/ } } 启动演示模式 情态标题 &时代； 关 保存更改

---

非常感谢你的回答，我不知道是谁投了反对票。。。有一个问题，是否可以像我在原始帖子中所做的那样，更改悬停时的背景色，并删除悬停时显示的黑色矩形以及您提供的代码？谢谢@谢谢你，很高兴听到你这么说。让我检查一下黑色的长方形。我一点也没看到。不要忘记接受作为解决方案-谢谢，如果可能的话，我将用更新我的asnwer来更改颜色。@bobe Th

---

非常感谢你。我建议使用溢出：在列表项上滚动CSS，使其在项目更多时可以滚动。@bobe我已编辑我的答案以添加溢出，滚动选项为10+个元素或更多。你也可以随心所欲地设置高度。@bobe OK我明白了-动态地这样做。您已经有了这个jQuery。如果.length大于1，则执行溢出的css，否则不执行任何操作。如果您针对这一问题发布其他问题，这将是理想的：