13

目標は、リスト アイテムがホバーされたとき、またはキーボードでフォーカスされたときに、リスト アイテムの背景が青色になる JQuery オートコンプリート要素を作成することです。Facebook の検索ボックスは、これをうまくやってのけます。

各<li>要素には、 でラップされたカスタム HTML が含まれています<a>。これらの<a>タグはそれぞれ class に属しますsbiAnchor。ホバー時に青色の背景を生成するには、次の CSS を使用して正常に実行できます。

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover{
    background: blue;
}

しかし、ユーザーがオートコンプリート リストを上下にキーを押したときに、同じ青い背景を適用するにはどうすればよいでしょうか。CSS コードを次のように変更しても機能しません。

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover, .ui-autocomplete .ui-state-focus a.ui-corner-all.sbiAnchor{
    background: blue;
}

ここで正しいアプローチは何ですか？この青い背景効果は、ページ上の特定の 1 つのオートコンプリートにのみ適用されることに注意してください (いくつか存在します)。そのため、sbiAnchor を使用してそのアイテムを他のオートコンプリート要素のアイテムと区別しています。他のオートコンプリートはデフォルトの動作を保持する必要があるため、CSS セレクターが広すぎないようにする必要があります。

4

10 に答える 10

24

この作業はかなり簡単

body .ui-autocomplete {
  /* font-family to all */
}

body .ui-autocomplete .ui-menu-item .ui-corner-all {
   /* all <a> */
}

body .ui-autocomplete .ui-menu-item .ui-state-focus {
   /* selected <a> */
}
于 2013-10-31T21:06:27.337 に答える
7

これにより、ホバーの色が変わりました。

.ui-menu-item .ui-menu-item-wrapper:hover
{
    border: none !important;
    background-color: #your-color;
}
于 2016-07-27T02:35:54.430 に答える
1

アンカー タグではなく入力フィールドがフォーカスを保持します。これはうまくいくはずです。

.ui-autocomplete-input:focus, .ui-autocomplete a.ui-corner-all.sbiAnchor:hover {
    background: blue;
}
于 2013-02-21T01:23:38.823 に答える
0

理解するのに時間がかかりましたが、正しい CSS コードは次のとおりです。

.ui-menu .ui-menu-item a.sbiAnchor.ui-state-hover{
    background: blue;
}

これにより、上下のキーストロークによるホバーと選択の両方に青色の背景が提供され、一石二鳥です。jQuery オートコンプリート要素は、上/下のキーストロークを選択やフォーカスではなく、「ホバー」アクションとして扱うようです。

于 2013-02-21T20:32:43.147 に答える
0

とを使用.ui-menu-itemしui-menu-item-wrapper.ui-state-activeます。

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: #f5f5f5 !important; 
  border: solid 1px transparent; 
}
于 2020-08-16T00:33:08.473 に答える