javascript - 调整屏幕大小时无法消除悬停效果

当屏幕较小时，我向div添加了悬停效果。当将屏幕调整为更大尺寸时，div变成搜索框，并且悬停效果应该消失了。问题在于悬停效果仍然持续。

请参见here - jsfiddle。

HTML：

<div id="search">
  <i class="fa fa-search" aria-hidden="true"></i>
  <input type="search" placeholder="Ara">
</div>

CSS：

div#search {
  position: absolute;
  top: 5px;
  width: auto;
  border: 2px solid #333;
  padding: 5px;
  right: 150px;
}

div#search i {
  font-size: 25px;
  border-right: 2px solid #333;
  padding-right: 10px;
  margin-left: 10px;
}

div#search input {
  width: 200px;
  height: 40px;
  font-size: 22px;
  border: none;
  outline: none;
  background: transparent;
  margin-left: 5px;
}

@media screen and (max-width: 1280px) {
  div#search {
    right: 40px;
    width: 32px;
    padding: 13.5px;
  }
  div#search input {
    display: none;
  }
  div#search i {
    margin: 5px;
    border: none;
  }
}

jQuery的：

$(document).ready(function() {

  searchHover();

  $(window).resize(function() {

    searchHover();
  });
});

function searchHover() {
  var width = $(window).width() + 17;

  if (width < 1280) {
    $('div#search').on('mouseover', function() {
      $(this).css({
        'background-color': '#00aeef',
        'transition': '0.5s',
        'border-color': '#00aeef',
        'color': 'white',
        'border-radius': '5px'
      });
    });

    $('div#search').on('mouseout', function() {
      $(this).css({
        'background-color': 'transparent',
        'transition': '0.5s',
        'border-color': '#333',
        'color': '#333',
        'border-radius': '0px'
      });
    });
  }
}

最佳答案

如果我正确理解了您的问题，那么我认为我已经解决了。请参见fiddle。

您的问题是您忘记了else子句：

if (width < 1280) {
  $('div#search').on('mouseover', function() {
    $(this).css({
      'background-color': '#00aeef',
      'transition': '0.5s',
      'border-color': '#00aeef',
      'color': 'white',
      'border-radius': '5px'
    });
  });

  $('div#search').on('mouseout', function() {
    $(this).css({
      'background-color': 'transparent',
      'transition': '0.5s',
      'border-color': '#333',
      'color': '#333',
      'border-radius': '0px'
    });
  });
} else {
  $('div#search').off('mouseover mouseout');
}

如果没有else子句，则在宽度小于1280时设置事件侦听器，但在宽度大于或等于1280时永远不要关闭它们。

您可以在full screen mode中更轻松地看到它。