Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Проблемы с появлением блока при фокусе (https://javascript.ru/forum/misc/44401-problemy-s-poyavleniem-bloka-pri-fokuse.html)

grisha2217 18.01.2014 13:04
Проблемы с появлением блока при фокусе
 
Всем здравствуйте.

Хочу сделать "подсказку" при фокусе input.

Код вроде правильный, а работать не хочет:

$(document).ready(function(){
  $(".loginBoxInput input").focus(function(){
    $(".popup_input").addClass("dblock").animate({opacity: 1}, 700);
    },function(){
    $(".popup_input").removeClass("dblock").animate({opacity: 0}, 700);
  });
});




<div class="loginBoxInput">
<input value="Логин">
<div class="popup_input">Введите ваш логин, указанный при регистрации</div>
</div>



Код:
.popup_input {
opacity:0;
.....
}

Если кому нужна ссылка, то вот. Кликните на input "Логин". Рядом находится див с подсказкой (в исходном коде)


Что не так?

sparrow 18.01.2014 16:51
Код рабочий, проверьте подключили ли вы библиотеку jQuery?

grisha2217 18.01.2014 22:27
Цитата:
Сообщение от sparrow (Сообщение 292840)
Код рабочий, проверьте подключили ли вы библиотеку jQuery?
Да, в head вставлен скрипт:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



Если есть какие-то сомнения, то можете навести на див "Больше список" (Находится левее формы входа). Я там сделал тоже на JS, но с hover, а не focus

рони 19.01.2014 05:54
grisha2217,
неиспользуйте формат hover для focus!!!
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.popup_input {
opacity:0;
}
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>$(document).ready(function(){
  $(".loginBoxInput input").focus(function(){
    $(".popup_input").addClass("dblock").animate({opacity: 1}, 700);
    }).blur(function(){
    $(".popup_input").removeClass("dblock").animate({opacity: 0}, 700);
  });
});
</script>
</head>

<body>
<div class="loginBoxInput">
<input value="Логин">
<div class="popup_input">Введите ваш логин, указанный при регистрации</div>
</div>
</body>
</html>

grisha2217 19.01.2014 13:10
рони, работает! Большое вам спасибо!


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