jqueryのUIのドロップダウン/選択[丸い下]これを使用して

Question

：私が代わりにグラデーション/無地色の背景画像を使用していhttp://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html

。 私はこの作品 、丸みを帯びたドロップダウンボックスの下部を持ちたい：

.ui-corner-bottom {background:url(images/backbottom.png);} 

が、どのように私はあなたが下のロールオーバー時に行われるセレクタを呼び出し/アクセスできますか？ このコードは、私はこれがうまくいくと仮定しかし、あなたが選択ボックスのIDか何かを持っている場合、それは

.ui-corner-bottom-hover {background:url(images/backbottom2.png); } 

Answer 1

のようなもの。

.ui-corner-bottom.ui-state-hover { 
    background: url(images/backbottom2.png); 
} 

それはスタイルだけで両方のクラスを持っている要素に適用されるように両方のクラスを一緒に書き込むことで、ホバリングだときのjQuery UIは任意の要素にUI-状態ホバークラスを適用します。

そして、いくつかの追加のアドバイス： 私は、このホバー効果のためにそのホバー状態ごとに異なる画像を使用して要素の上に初めてホバリング時にあなたは何の醜いフラッシュを避けるため、このようにCSSスプライトを使用することをお勧めします。 Chris Coyierがここに素敵な要約/紹介を書きました：http://css-tricks.com/158-css-sprites/

Answer 2

.ui-selectmenu-menu .ui-corner-bottom {background:url(images/backbottom2.png); } 

をdoesntのが、

.ui-widget-content .ui-state-hover, 
.ui-state-focus, 
.ui-widget-content .ui-state-focus {background:url(images/select.png) } 

、すべてのli.items上のホバーのために呼び出されますあなたのCSSでそれを使用するので、デフォルトのJQUERY UI CSSファイルよりも優先されます。

だから、これはトリックを行う必要があります

#mySelectbox .ui-corner-bottom {background:url(images/backbottom2.png); }