删除默认的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选择器，以便获得一定程度的特定性来覆盖jQueryUI的样式。以下是更新的jsFiddle：https://jsfiddle.net/zcvxy2z6/16/