Форум

grisha2217 · #1 (**permalink**) 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 · #2 (**permalink**) 18.01.2014, 16:51

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

grisha2217 · #3 (**permalink**) 18.01.2014, 22:27

Сообщение от sparrow

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

Да, в head вставлен скрипт:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

рони · #4 (**permalink**) 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 · #5 (**permalink**) 19.01.2014, 13:10

рони, работает! Большое вам спасибо!

Форум

Справочник

Discord чат

Курсы javascript