화면의 크기를 조정할 때 호버 효과를 제거 할 수 없습니다.

Question

화면이 작을 때 div에 호버 효과를 추가합니다. 화면 크기가 커지면 크기가 커지고 div가 검색 상자로 바뀌고 마우스 오버 효과가 사라집니다. 문제는 호버 (hover) 효과가 계속 유지된다는 것입니다.

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

Answer 1

올바르게, 나는 내가 그것을 해결할 생각합니다. fiddle을 참조하십시오. 폭이 1280보다 작은 경우는 이벤트 리스너를 설정할 수 있지만 폭이 큰 경우에 당신이 그들을 끄지 마십시오의 다른 절없이

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 절을 잊었습니다 또는 동등하다.

full screen mode에서 더 쉽게 볼 수 있습니다.