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

Question

我有一个搜索功能，可以做 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>

CSS:

.searchbox #search {
  display: inline;
  border: 2px solid #c8c8c8;
  position: relative;
  height: 20px;
  width: 20px;
  float: right;
  padding: 4px;
  border-radius: 5px;
  transition: all 500ms;
}

.searchbox #search:hover {
  display: inline;
  border: 2px solid #808080;
  position: relative;
  float: right;
  padding: 4px;
  border-radius: 5px;
  transition: all 500ms;
}

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

2) 用户应该点击这个图标，然后它会展开一个新图标和一个改变的边框宽度(padding-left: 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 问题？

我添加了一个 jsfiddle 以供您查看我的示例:

https://jsfiddle.net/bfytnbs3/

Answer 1

It would be a lot easier if the :hover parameter in the CSS could change both the color of the .png and the border, however i've been searching alot for this specific solution, and it doesnt seem to be available!

您可以使用 CSS Sprite 来完成此操作。更多阅读在这里:http://www.w3schools.com/css/css_image_sprites.asp

基本上，您会有一个 magnifier.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 示例，您可以看到它是如何工作的:

https://jsfiddle.net/s51zjre4/1/