删除默认的 ui 超链接行为

Question

我制作了一个搜索框，它使用 jQuery UI 自动完成功能来显示潜在的搜索匹配项。 我注意到下拉列表中的a s 在悬停时移动和缩小 UI 菜单几个像素。 有没有办法防止这种情况出现在菜单链接上的唯一样式是我通过以下方式添加的颜色更改：

.ui-menu .ui-menu-item a:hover{
  background:none;
  color:#FF0000;
  font-size:10px;
}

这是迄今为止我的进步https://jsfiddle.net/shaneswebdevelopment/zcvxy2z6/1/

Answer 1

因此，当您将鼠标悬停在下拉列表中的项目上时，jQuery ui 会在您的元素上添加一个ui-state-focus类，该类具有以下 css 属性：

.ui-state-focus {
     font-weight: normal;
     margin: -1px;
 }

你看到字符跳跃的原因是因为margin: -1px; . 如果您用其他东西覆盖该 css 类，则可以消除跳跃文本。

所以为了修复你可以这样做：

.ui-menu .ui-menu-item a.ui-state-focus {
  margin: 0px;
}

注意我添加了其他 CSS 选择器，以便获得一定程度的特异性来覆盖 jQuery UI 的样式。 这是更新的 jsFiddle： https ://jsfiddle.net/zcvxy2z6/16/