Chrome Inspectorを使用してjqueryプラグインのポップアップCSSを表示する方法

Question

Chromeインスペクタでjqueryプラグインで使用されているクラス名とそのプロパティを表示するようにしようとしています。欲しいです。ただし、ChromeのインスペクタのCSSウィンドウには表示されません。

私は、テキストボックスをクリックするとリスト項目のポップアップを表示するプラグインを使用しています。 See jsfiddle

$('#example-1').timeselect({ 
    'step': 15, 
    autocompleteSettings: { 
     autoFocus: true 
    } 
}); 

は私がホバーを参照してくださいthis答えて読まれる以下のスクリーンショット

に示すように、現在そこにあるものからハイライトされた行の背景色や文字サイズを変更したいですChromeのインスペクタでcssウィンドウの.hovスタイルを確認する必要があります。

設定した要素の状態は関係ありません。 ChromeのCSSウィンドウでは、変更しようとしている2つのプロパティ、つまり行のフォントサイズと背景色が強調表示されているCSSの表示は表示されません。それは私の窓に灰色の色を全く示さない。それは、テキストボックスがクリックされ、ホバーがアクティブであるときのテキストサイズではなく、テキストボックスの静的フォントサイズを変更することしかできません。

私はプラグインのためにjavascript code on GitHubを見ました。参照はありません。それに適用されるCSSやスタイルへの参照はありません。下記の解答の

概要：

1. jQueryプラグインの準備ができてDOMにHTMLを作成します。 Chromeインスペクタで作成したhtmlを探します。

2. インスペクタを使用して、関連するhtml作成要素を強調表示し、行を視覚的に強調表示するときにhtmlに動的に挿入されるcssクラス名をメモします。 ChromeのCSSパネルウィンドウで

3. は、+アイコンをクリックし、手順2

4. ビューで識別されたクラス名を追加して、特定のクラスのためのフィドルで

Answer 1

をCSSプロパティを調整します入力ボックス（テキストを入力するためにクリックした場所）を調べ、クリックしたりクリックしたりしてHTMLの変更を見ることができます。要素が開閉したとき（通常、要素がdisplay:none;からblockのスタイルのように変化していることを意味する）、インスペクタの要素をマウスで操作することができます。

インスペクタの要素にマウスを重ねると、点灯するブロックが表示されます。場合によっては、必要なブロックが大きなブロックに含まれているため、このブロックを横にトラバースするだけです（要素を開くには黒い矢印を使用してください）

あなたが探しているのは<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1"...です選択オプション。

下の画像で、ブロックを見つけた方法は、「基本的な例」の実際の入力を検査することでした。これはIDが#example-1の完全に横断された入力を示しました。それから私は別の場所をクリックしてから実際のオプションが隠されていたので、再度入力をクリックして開き、インスペクタで何か変わったことに気付きました。オプションボックスが開いている間、インスペクタの要素の上にマウスを移動したばかりです。私はdiv（検査官の灰色で強調表示されている）がオプションの収容ボックスであることを知った。

TLDR;あなたは背景を変更するつもりです.ui-menu-item