6

CSSで設定された背景画像（虫眼鏡のある検索バー）を使用して、入力html要素にjquery uiの「ハイライト」効果を使用しようとしています。ただし、「ハイライト」アニメーション中は背景画像が一時的に消え、ハイライト アニメーションが終了すると表示されます。アニメーション全体でイメージを維持したいと思います。何か案は？

HTML:

<input class="searchInput" id='searchInputWithMap' type="text" tabindex="100" name="searchStructures" />

CSS:

.searchInput {

 font-family:Trebuchet MS,Helvetica,sans-serif;
 background:transparent url(/images/search4.png) no-repeat scroll 8px 6px;
 height:22px;
 line-height:28px;
 padding-left:32px;
 padding-right:3px;
 padding-top:5px;
 padding-bottom:5px;
 margin:5px 0;
 border:1px solid #999999;
 font-size:130%;
 height: 32px; 
 width: 400px;
 vertical-align:center;
    color:#BBBBBB;

}
4

4 に答える 4

6

次のように に追加!importantしますCSS。

.searchInput { background-image:url(/images/search4.png) !important; }

注意して使用してください。

于 2012-04-13T02:18:59.623 に答える
5

JQuery UIのハイライト コードを掘り下げたところ、#4583 行が問題だと思います。

el.css({backgroundImage: 'none', backgroundColor: color});

この関数のコピーを次のように変更できます。

el.css({backgroundColor: color});
于 2009-11-13T21:21:18.800 に答える
2

ハイライトが呼び出されると、ソースは backgroundImage を「none」に設定しますが、それを構成する方法がわかりません。いつでも独自のハイライト効果を作成でき、backgroundImage を削除する必要はありません (私はこれを行いました。元の画像をコピーして貼り付け、1 つの .css() 呼び出しを変更するだけです)。

それほどきれいではありませんが、できるもう1つのことは次のとおりです。

$("#searchInputWithMap").click(function () {
    $(this).effect("highlight", {}, 3000);
    $(this).css('backgroundImage','url(/images/search4.png)');
 });

ギャップがありますが、これにより、ハイライト アニメーションが開始された直後に背景画像が元の位置に戻ります。

于 2009-11-13T21:19:04.233 に答える
0

ハイライトの色に透明なアルファ チャネルを追加できますか? 私はCSSにあまり詳しくありませんが、それはチェックする場所のようです.

それ以外の場合は、bg 画像を、ボックスをまったく強調表示せずに強調表示されたバージョンに置き換えていただけますか?

于 2009-11-13T20:48:02.933 に答える