當我調整屏幕大小時，我無法移除懸停效果

當屏幕較小時，我將懸停效果添加到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

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

當我調整屏幕大小時，我無法移除懸停效果

回答

相關問題