6

我正在尝试对输入 html 元素使用 jquery ui“突出显示”效果，并在 CSS 中设置背景图像（带有放大镜的搜索栏）。然而，在“突出显示”动画期间，背景图像会暂时消失，然后在突出显示动画结束后出现。我希望图像在整个动画中保留。有任何想法吗？

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

当调用 highlight 时，源将 backgroundImage 设置为“none”，我不知道如何配置它。您始终可以创建自己的高亮效果，而根本不删除 backgroundImage（我已经这样做了，只需复制/粘贴原始文件并更改一个 .css() 调用）。

你可以做的另一件事，虽然它不是那么干净：

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

会有一个间隙，但这会在高亮动画开始后立即将背景图像放回原位。

于 2009-11-13T21:19:04.233 回答
0

您可以为突出显示颜色添加透明的 Alpha 通道吗？我对 CSS 不是很熟悉，但这似乎是检查的地方。

否则，您是否可以将 bg 图像替换为您制作的版本突出显示而不突出显示框？

于 2009-11-13T20:48:02.933 回答