刪除默認的 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/