当屏幕较小时,我会向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'
});
});
}
}
答案 0 :(得分: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中更轻松地看到它。