Изменить onclick на hover
Здравствуйте. Прошу подсказки у знающих. Есть скрипт:
$(function() {
$(document).mouseup(function(e) {
if($(e.target).parent("a.signInBox").length == 0) {
$(".signInBox").removeClass("active");
$("#signInMenu").hide();
}
}),
$(".signInBox").click(
function(event) {
event.preventDefault();
$("#signInMenu").toggle();
$(this).toggleClass("active");
}
),
$("#signInMenu").mouseup(function() {
return false
})
});
Здесь по клику открывается форма входа на сайт. Мне нужно, что бы она открывалась при наведении. Меняла click на hover, работает, но сам элемент не активен. То есть при ховере сама форма появляется но зайти через эту форму я не могу, так как она сразу исчезает. Подскажите что еще добавить в код... |
|
Спасибо, сделать элемент активным получилось, правда теперь блок не убирается когда отводишь курсор, пробовала mouseleave, но не выходит..
|
nat,
сделайте макет ... не все телепаты |
$(function() {
$(document).mouseup(function(e) { if($(e.target).parent("a.signInBox").length == 0) { $(".signInBox").removeClass("active"); $("#signInMenu").hide(); } }), $(".signInBox").mouseenter( function(event) { event.preventDefault(); $("#signInMenu").toggle(); $(this).toggleClass("active"); }), $("#signInMenu").mouseup(function() { return false }) }); |
nat,
макет это не только код но и html |
<div class="relative">
<div class="signInBox ml5"><div class="li-menu"><i class="icon-user"></i>Вход</div></div>
<div id="signInMenu" class="signInMenu">
<div class="inline mb10 pt10 pb10">
</div>
<form accept-charset="UTF-8" id="user-login-form" method="post" action="/node?destination=node">
<div class="z10">
<label class="inputLabel" for="username_email">Логин или емайл:</label>
<input type="text" name="name" id="edit-name">
<label class="inputLabel" for="email">Пароль:</label>
<input type="password" name="pass" id="edit-pass">
<input type="hidden" value="" name="form_build_id">
<input type="hidden" value="user_login_block" name="form_id">
<div class="sb-reg">
<input type="submit" class="form-submit" value="Войти" name="op" id="edit-submit">
<a href="/user/password">Забыли пароль?</a>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(function() {
$(document).mouseup(function(e) {
if($(e.target).parent("a.signInBox").length == 0) {
$(".signInBox").removeClass("active");
$("#signInMenu").hide();
}
}),
$(".signInBox").mouseenter(
function(event) {
event.preventDefault();
$("#signInMenu").toggle();
$(this).toggleClass("active");
}),
$("#signInMenu").mouseup(function() {
return false
})
})
});
</script>
|
nat,
то есть css прячем ? и в 56 строке что валяется? |
nat,
и что не так работает?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.signInMenu {
display: none;
}
.li-menu {
background-color: #FF00FF;
}
</style>
</head>
<body>
<div class="relative">
<div class="signInBox ml5">
<div class="li-menu"><i class="icon-user"></i>Вход</div>
</div>
<div id="signInMenu" class="signInMenu">
<div class="inline mb10 pt10 pb10">
</div>
<form accept-charset="UTF-8" id="user-login-form" method="post" action="/node?destination=node">
<div class="z10">
<label class="inputLabel" for="username_email">Логин или емайл:</label>
<input type="text" name="name" id="edit-name">
<label class="inputLabel" for="email">Пароль:</label>
<input type="password" name="pass" id="edit-pass">
<input type="hidden" value="" name="form_build_id">
<input type="hidden" value="user_login_block" name="form_id">
<div class="sb-reg">
<input type="submit" class="form-submit" value="Войти" name="op" id="edit-submit">
<a href="/user/password">Забыли пароль?</a>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".signInBox").mouseenter(
function (event) {
event.preventDefault();
$("#signInMenu").toggle();
$(this).toggleClass("active");
});
$("#signInMenu").mouseleave(function (event) {
if ($(event.relatedTarget).parents(".relative").length == 0) $(this).toggle()
});
})
</script>
</body>
</html>
|
да, css прячем. в 56строке убрала, то так скопировала.
Работает все, но вот навела на ВХОД, выпал блок, навела еще раз на Вход, он пропал. а вот если просто убираю курсор с блока, он не пропадает, только то клику может исчезнуть |
| Часовой пояс GMT +3, время: 01:37. |