Javascript Onmouseover/out在jQuery中停用和重新激活

我有一个搜索功能，可以做3件事：

1） 首先，当用户将鼠标悬停在图标上时，应更改图标及其周围边框的颜色：

HTML:

<div class="searchbox">
  <img id="search" src="Icons/magnifier2.png"    
       onmouseover="this.src='Icons/magnifier.png'"
       onmouseout="this.src='Icons/magnifier2.png'"/>
</div>

到目前为止还不错。在这一点上，我不确定为什么图像悬停时没有应用任何转换。。。有没有一种方法可以改变单个.png图标的颜色，而不是在两个.png之间切换

2） 用户应该单击此图标，然后它将以新图标和更改的边框宽度展开（左填充：130px；）。以下是jQuery代码：

$(function () {
  var search = $("#search");

  search.click(function () {
    search.attr("src", "Icons/magnifier.png").css({ 
      "border": "2px", 
      "border-style": "solid", 
      "border-color": "#808080", 
      "padding-left": "130px", 
      "transition": "all 500ms" });
  });
});

3） 当用户单击HTML正文时，边框应滑回正常位置并应用原始CSS：

$('html').click(function (e) {
  if (e.target.id != 'search') {
    $("#search").attr("src", "Icons/magnifier2.png");
    $("#search").removeAttr('style');;
  }
});

我的问题是，我的帖子顶部显示的HTML onmouseover/out在单击图标时仍处于活动状态（如果我将鼠标放在扩展边框的内外，它仍会更改图标）

我的简单解决方案：

如果CSS中的：hover参数可以同时更改.png和边框的颜色，那就容易多了，不过我一直在搜索这个特定的解决方案，但它似乎不可用

第二种解决方案是在jQuery中添加某种代码，search.click（function（），它将停用onmouseover/out，并在第二步中重新激活它。click（function（））

我希望我的问题足够清楚

• 我如何克服这个onmouseover/out问题

我添加了一个JSFIDLE，只是为了让您看到我的示例：

如果CSS中的：hover参数可以 改变.png和边框的颜色，不管我怎么做 为了这个特定的解决方案进行了大量的搜索，但它似乎不是 可用

您可以使用CSS精灵来完成此操作。更多阅读内容如下：

基本上，你会有一个放大镜.png图像，图标会有两种状态。然后你会使用一些CSS在它们之间切换

.searchbox {
    background: url('magnifier.png') 0px 0px;
}

.searchbox:hover {
    background: url('magnifier.png') 0px -25px;
}

在本例中，您将拥有一个25px x 50px的sprite图像，图像的每个状态都是25px x 25px

希望有帮助

编辑添加：下面是一个JS Fiddle示例，您可以看到它是如何工作的：

---

这并不能回答您的问题，但是

：hover

css中的所有属性都是多余的，除了

border

，并且可以简化为

border color:(808080

我刚刚意识到了这一点。谢谢！谢谢，我会研究一下：D我可以在启动jquery函数时禁用我的：hover css吗？是的，最好的方法是在你不想使用悬停样式的元素上切换类。我用一个JS Fiddle示例更新了我的答案，这样你就可以看到它是如何工作的了。：-）让我知道这是否是你想要的。

.searchbox {
    background: url('magnifier.png') 0px 0px;
}

.searchbox:hover {
    background: url('magnifier.png') 0px -25px;
}