Question

我的网页上有搜索功能。目前我有我的工作代码

search.click(function () {
    search.attr("src", "Icons/magnifier.png").css({
        "border": "2px",
        "border-style": "solid",
        "border-color": "#000000",
        "padding-left": "130px",
        "transition": "all 500ms"
    });
});
$('html').click(function (e) {
    if (e.target.id != 'search') {
        $("#search").attr("src", "Icons/magnifier2.png");
        $("#search").css({
            "border": "2px",
            "border-style": "solid",
            "border-color": "#c8c8c8",
            "padding-left": "4px",
            "transition": "all 500ms"
        });
    }
});

这个功能的作用是，当它点击图标改变并且边框向左扩展时，此后当用户点击页面时它会恢复正常。

现在我想为它添加一个突出显示按钮的悬停功能。

我得到了以下信息：

 var search = $("#search");
 search.mouseover(function (event) {
     search.css({
         "border": "2px",
         "border-style": "solid",
         "border-color": "#808080",
         "padding-left": "4px",
         "transition": "all 500ms"
     });
 });

 search.mouseout(function (event) {
     if (event != ('clicked')) {
         search.css({
             "border": "2px",
             "border-style": "solid",
             "border-color": "#c8c8c8",
             "padding-left": "4px",
             "transition": "all 500ms"
         });
     }
 });

当我悬停时，图标就像我想要的那样。但是，如果我点击它，它会扩展，但是如果我将鼠标移离字段，我的mouseout函数会触发..我试图做一个条件表达式，但我知道它错了，悬停功能不应该是活动的边界扩大了，我该怎么做？作为新的，并试图了解这一点，我真的很感激基于答案的解释。

https://jsfiddle.net/g2aLwLhg/

Answer 1

你可以在不混淆你的CSS和javascript问题的情况下做到这一点。这是一个演示您尝试做什么的示例：

<强> HTML

<div class="hoverStyles">Hover Me!</div>
<button onclick="toggleHover()">Toggle hover</button>

<强> CSS

.hoverStyles {
  background-color: blue;
  color: white;
}

.hoverStyles:hover {
  background-color: yellow;
  color: blue
}

.noHoverStyles {
  background-color: blue;
  color: yellow;
}

<强>的Javascript

function toggleHover() {
  if ($('.hoverStyles').length > 0) {
    $('.hoverStyles').addClass('noHoverStyles').removeClass('hoverStyles');
  } else {
    $('.noHoverStyles').removeClass('noHoverStyles').addClass('hoverStyles');
  }
}

[编辑]下面的笔已更新（请参阅注释），因此它不再与此答案中的代码完全相同，两者仍然有效。

Here is a working pen.

如果您有任何其他问题，请与我们联系：D

当另一个被触发时，jquery停用函数

1 个答案: