当我调整屏幕大小时，我无法移除悬停效果

当屏幕较小时，我将悬停效果添加到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' 
     }); 
    }); 
    } 
}

来源

2016-07-14 Arda Zaman

无法使用小提琴重新创建错误。看起来像它在Chrome osx上工作 – s0rfi949

它在Windows上的Chrome上正常工作。 –

请提供您的操作系统和浏览器。 – Bagata

如果我理解你的问题正确的话，我想我解决了这个问题。请参阅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更容易看到它。

来源

2016-07-15 01:01:07

哦，我明白了。谢谢：）。 –

当我调整屏幕大小时，我无法移除悬停效果

回答

相关问题