为什么在 mij 元素调整大小时我的光标停留在 'hover' 形式?
Why does my cursor stay in 'hover' form after mij element resized?
我正在尝试使用 HTML/CSS/Jquery 创建搜索栏。几乎一切正常,除了一件事:当输入字段调整大小时,鼠标保持悬停状态,直到我移动鼠标。为什么在调整元素大小后我的鼠标没有更改为默认值,我该如何解决这个问题?
HTML 片段:
$(document).ready(function () {
'use strict';
var searchClicked = false;
$('.menu').on('click', function () {
$('.menu-panel').animate({'left' : '0px'}, 'ease', 'swing');
$('.overlay').toggle();
});
$('.overlay').on('click', function () {
$('.menu-panel').animate({'left' : -$('.menu-panel').width() - 200});
$('.overlay').toggle();
});
$('.search').on('click', function (e) {
if (!searchClicked) {
$(this).animate({
'padding-right' : '180px'
}, 'ease');
$(this).css({
'background-color' : 'rgba(233, 30, 99, 1)',
'color' : '#fff'
});
$('#search-bar').animate({ 'width' : '150px'}, 'ease').focus();
searchClicked = true;
} else {
$('.search').animate({
'padding-right' : '0px'
}, 'ease');
$('#search-bar').css({ 'width' : '0px'});
$(this).delay(100).queue(function (next) {
$(this).css({
'background-color' : '#fff',
'color' : '#acacac'
});
next();
});
searchClicked = false;
}
});
});
html, body {
font-family: 'Roboto', sans-serif;
background-color: #eef2f4;
}
.left { float: left !important; }
.right { float: right !important; }
li {
list-style: none;
}
a {
text-decoration: none;
color: #212121;
}
.pink { color: rgba(233, 30, 99, 1);}
textarea:focus, input:focus{
outline: 0;
}
.wrapper {
position: relative;
width: 1280px;
margin: 0 auto;
}
.overlay{
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-color: rgba(189,195,199, 0.5);
z-index: 98;
display: none;
}
/*============================================================*/
/*========================= HEADER BAR ========================*/
/*============================================================*/
header {
position: relative;
width: 100%;
height: 75px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
text-align: center;
}
.logo {
position: relative;
line-height: 75px;
font-size: 22px;
font-weight: 700;
color: rgba(33, 33, 33, 0.8);
}
.logo:hover { color: rgba(33, 33, 33, 0.6); }
#search-bar {
position: absolute;
top: 28px;
right: 30px;
border: none;
font-size: 16px;
border-bottom: 1px solid #fff;
background-color: rgba(233, 30, 99, 0.01);
color: #fff;
width: 0px;
z-index: 999;
}
.navlinks {
display: block;
position: absolute;
top: 0;
line-height: 75px;
width: 65px;
height: 100%;
color: #acacac;
}
.navlinks:hover { background-color: rgba(233, 30, 99, 1) !important; color: #fff !important;}
.menu {left: 0px;}
.search {right: 0px;}
@media (max-width: 1280px) {
.wrapper {
width: 100%;
}
}
@media (max-width: 290px) {
.logo { font-size: 19px; }
.navlinks { font-size: 14px}
}
/*============================================================*/
/*========================= MENU PANEL ======================*/
/*============================================================*/
.menu-panel {
position: absolute;
top: 0;
left: -300px;
width: 300px;
height: 100%;
z-index: 99;
background-color: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
@media (max-width: 320px) {
.menu-panel {
width: 210px;
}
.navlinks:hover { background-color: rgba(233, 30, 99, 1) !important; color: #fff !important;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Poging #2</title>
</head>
<body>
<header>
<nav class="wrapper">
<ul class="left">
<li><a href="#" class="navlinks menu"><i class="fa fa-bars fa-lg"></i></a></li>
</ul>
<a href="#" class="logo">LOGO</a>
<ul class="right">
<input type="text" id="search-bar">
</ul>
<a href="#" class="navlinks search"><i class="fa fa-search fa-lg"></i></a>
</nav>
</header>
<div class="menu-panel">
</div>
<div class="overlay"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
编辑:制作了一个代码片段;打开搜索并再次关闭它 -> 不要移动鼠标,鼠标不会将状态更改为默认状态(并且 :hover 效果保持活动状态,直到我移动鼠标)
我认为这取决于浏览器。在我当前的 Firefox 38.0.1 ESR 中,光标(未移动)重置为默认值。
我正在尝试使用 HTML/CSS/Jquery 创建搜索栏。几乎一切正常,除了一件事:当输入字段调整大小时,鼠标保持悬停状态,直到我移动鼠标。为什么在调整元素大小后我的鼠标没有更改为默认值,我该如何解决这个问题?
HTML 片段:
$(document).ready(function () {
'use strict';
var searchClicked = false;
$('.menu').on('click', function () {
$('.menu-panel').animate({'left' : '0px'}, 'ease', 'swing');
$('.overlay').toggle();
});
$('.overlay').on('click', function () {
$('.menu-panel').animate({'left' : -$('.menu-panel').width() - 200});
$('.overlay').toggle();
});
$('.search').on('click', function (e) {
if (!searchClicked) {
$(this).animate({
'padding-right' : '180px'
}, 'ease');
$(this).css({
'background-color' : 'rgba(233, 30, 99, 1)',
'color' : '#fff'
});
$('#search-bar').animate({ 'width' : '150px'}, 'ease').focus();
searchClicked = true;
} else {
$('.search').animate({
'padding-right' : '0px'
}, 'ease');
$('#search-bar').css({ 'width' : '0px'});
$(this).delay(100).queue(function (next) {
$(this).css({
'background-color' : '#fff',
'color' : '#acacac'
});
next();
});
searchClicked = false;
}
});
});
html, body {
font-family: 'Roboto', sans-serif;
background-color: #eef2f4;
}
.left { float: left !important; }
.right { float: right !important; }
li {
list-style: none;
}
a {
text-decoration: none;
color: #212121;
}
.pink { color: rgba(233, 30, 99, 1);}
textarea:focus, input:focus{
outline: 0;
}
.wrapper {
position: relative;
width: 1280px;
margin: 0 auto;
}
.overlay{
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-color: rgba(189,195,199, 0.5);
z-index: 98;
display: none;
}
/*============================================================*/
/*========================= HEADER BAR ========================*/
/*============================================================*/
header {
position: relative;
width: 100%;
height: 75px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
text-align: center;
}
.logo {
position: relative;
line-height: 75px;
font-size: 22px;
font-weight: 700;
color: rgba(33, 33, 33, 0.8);
}
.logo:hover { color: rgba(33, 33, 33, 0.6); }
#search-bar {
position: absolute;
top: 28px;
right: 30px;
border: none;
font-size: 16px;
border-bottom: 1px solid #fff;
background-color: rgba(233, 30, 99, 0.01);
color: #fff;
width: 0px;
z-index: 999;
}
.navlinks {
display: block;
position: absolute;
top: 0;
line-height: 75px;
width: 65px;
height: 100%;
color: #acacac;
}
.navlinks:hover { background-color: rgba(233, 30, 99, 1) !important; color: #fff !important;}
.menu {left: 0px;}
.search {right: 0px;}
@media (max-width: 1280px) {
.wrapper {
width: 100%;
}
}
@media (max-width: 290px) {
.logo { font-size: 19px; }
.navlinks { font-size: 14px}
}
/*============================================================*/
/*========================= MENU PANEL ======================*/
/*============================================================*/
.menu-panel {
position: absolute;
top: 0;
left: -300px;
width: 300px;
height: 100%;
z-index: 99;
background-color: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
@media (max-width: 320px) {
.menu-panel {
width: 210px;
}
.navlinks:hover { background-color: rgba(233, 30, 99, 1) !important; color: #fff !important;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Poging #2</title>
</head>
<body>
<header>
<nav class="wrapper">
<ul class="left">
<li><a href="#" class="navlinks menu"><i class="fa fa-bars fa-lg"></i></a></li>
</ul>
<a href="#" class="logo">LOGO</a>
<ul class="right">
<input type="text" id="search-bar">
</ul>
<a href="#" class="navlinks search"><i class="fa fa-search fa-lg"></i></a>
</nav>
</header>
<div class="menu-panel">
</div>
<div class="overlay"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
编辑:制作了一个代码片段;打开搜索并再次关闭它 -> 不要移动鼠标,鼠标不会将状态更改为默认状态(并且 :hover 效果保持活动状态,直到我移动鼠标)
我认为这取决于浏览器。在我当前的 Firefox 38.0.1 ESR 中,光标(未移动)重置为默认值。