Entfernen Sie Standard-ui-Hyperlink-Verhalten

Question

Ich habe ein Suchfeld erstellt, das die jQuery UI-Autocomplete-Funktion verwendet, um mögliche Suchtreffer anzuzeigen. Ich habe bemerkt, dass die a s in der Dropdown-Liste das UI-Menü um mehrere Pixel verschieben und verkleinern, wenn es verschoben wird. Gibt es eine Möglichkeit, dies so, dass die einzige Styling zu verhindern, die auf den Menü-Links erscheint, ist die Farbänderung ich über hinzugefügt haben:

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

Hier eine Geige meines Fortschritt ist bisher https://jsfiddle.net/shaneswebdevelopment/zcvxy2z6/1/

Answer 1

es also stellt sich heraus, wenn Sie über einen Eintrag in der Dropdown-Liste schweben, fügt jQuery ui eine ui-state-focus Klasse auf dem Element, das diese CSS-Eigenschaften hat:

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

der Grund, warum Sie die Zeichen Sprung sind zu sehen, ist wegen der margin: -1px; . Wenn Sie diese CSS-Klasse mit etwas anderem überschreiben, können Sie den Sprungtext eliminieren.

Also, um Sie zu beheben, könnte dies tun:

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

Hinweis Ich habe hinzugefügt, andere CSS-Selektoren, um ein gewisses Maß an Spezifität zu erhalten, jQuery UI Styles außer Kraft setzen. Hier ist eine aktualisierte jsFiddle: https://jsfiddle.net/zcvxy2z6/16/