调整屏幕大小时无法删除悬停效果

Question

我在 div 屏幕较小时添加悬停效果。当屏幕尺寸变大时，div 变成搜索框，悬停效果应该会消失。问题是悬停效果依旧。

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'
      });
    });
  }
}

Answer 1

如果我正确理解了您的问题，那么我想我已经解决了。参见 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 时设置事件侦听器，但当宽度大于或等于时永远不会关闭它们。

您可以在 full screen mode.

中更轻松地看到它

调整屏幕大小时无法删除悬停效果

I can't remove hover effect when I resize the screen

javascript

css

jquery

resize

hover