デフォルトのuiハイパーリンクの動作を削除します

Question

jQuery UIのオートコンプリート機能を使用して検索の候補を表示する検索ボックスを作成しました。ドロップダウンリストのaが、ホバリングされたときに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は、これらのCSSプロパティを持っているあなたの要素にui-state-focusクラスを追加します：あなたは文字のジャンプを見ている

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

理由は、margin: -1px;であります。そのcssクラスを他のものでオーバーライドすると、ジャンプするテキストをなくすことができます。私はjQueryのUIのスタイルを上書きするために特異性のあるレベルを得るために他のCSSセレクタを追加しました

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

注：あなたがこれを行うことができます固定するためにそう

。更新されたjsFiddleがあります：https://jsfiddle.net/zcvxy2z6/16/