Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменить onclick на hover (https://javascript.ru/forum/dom-window/45055-izmenit-onclick-na-hover.html)

nat 12.02.2014 15:38

Изменить 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, работает, но сам элемент не активен. То есть при ховере сама форма появляется но зайти через эту форму я не могу, так как она сразу исчезает. Подскажите что еще добавить в код...

рони 12.02.2014 16:12

nat,
hover и элементы form

nat 12.02.2014 16:44

Спасибо, сделать элемент активным получилось, правда теперь блок не убирается когда отводишь курсор, пробовала mouseleave, но не выходит..

рони 12.02.2014 16:46

nat,
сделайте макет ... не все телепаты

nat 12.02.2014 16:56

$(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
})

});

рони 12.02.2014 16:59

nat,
макет это не только код но и html

nat 12.02.2014 17:01

<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>

рони 12.02.2014 17:07

nat,
то есть css прячем ? и в 56 строке что валяется?

рони 12.02.2014 17:17

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>

nat 12.02.2014 17:40

да, css прячем. в 56строке убрала, то так скопировала.
Работает все, но вот навела на ВХОД, выпал блок, навела еще раз на Вход, он пропал. а вот если просто убираю курсор с блока, он не пропадает, только то клику может исчезнуть


Часовой пояс GMT +3, время: 22:46.