Форум

Tixter · #1 (**permalink**) 15.04.2015, 17:38

Приветствую, друзья.
Всю жизнь ваял страницы без динамических элементов, но времена меняются - придется учить js.

Дано:
Есть страница с первым уроком курса. А в сайдбаре большой блок с надписью "Урок 2: название_урока". При наведении туда мышкой (hover) на месте блока появляется верхний блок с текстом: "уроки 2-5 можете получить в рассылке" и формой подписки (все это до наведения просто было прозрачным).
Проблема в том, что как только мышку уводишь - снова открывается нижний блок. Так должно быть только если форма неактивна. А если человек начал вводить что-то - форма (и весь верхний блок) уже не должна исчезать.

Подскажите, какие варианты можно применить для таких целей?

tsigel · #2 (**permalink**) 15.04.2015, 18:02

<html>
<head>

<style>

 .form {
     display:none;
  }

  .menu {
     list-style: none
  }

   .menu li {
       float: left;
       width: 200px;
       border: 1px solid #000
    }

    .form {
        display: none;
     }

     .menu li:hover .form {
        display: block
     }

</style>

</head>
<body>

<header>
<ul class="menu">
  <li>item1
    <div class="form">
       <input type="text" placeholder="1" />
    </div>
  </li>
  <li>
    item2
   <div class="form">
       <input type="text" placeholder="2" />
    </div>
  </li>
</ul>
</header>

</body>
<html>

Safort · #3 (**permalink**) 15.04.2015, 18:04

Без кода сложно что-то подсказать. Как вариант: проверять есть ли фокус на поле, если есть, то ничего не делать.

Safort · #4 (**permalink**) 15.04.2015, 18:12

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>content</title>
    <style>
    form:hover input {
      display: block;
    }
    form {
      border: 1px solid;
    }
    input {
      display: none;
    }
    input:focus {
      display: block;
    }


    </style>
  </head>
  <body>
    <form action="">
      <div>Заголовок</div>
      <input placeholder="текст">
    </form>
  </body>
</html>

Safort · #5 (**permalink**) 15.04.2015, 18:14

tsigel,
у меня твой код в последнем FF не работает, инпут в фокусе скрывается есть курсор отвести.

tsigel · #6 (**permalink**) 15.04.2015, 18:23

Safort,
да, надо было на фокус повесить блок

Tixter · #7 (**permalink**) 15.04.2015, 22:21

Примерный набросок того, что нужно.
На месте красного фона будет изображение "Урок 2: бла-бла-бла". При наведении появляется форма, которая не должна исчезать, если в нее что-то вводится.

Пробовал делать через opacity (в примере).
Еще пробовал весь этот блок делать сразу form (без внешнего div), в нее фоном вставлять нужную картинку (вместо красного фона), а внутрь form класть скрытый div с полями ввода и кнопкой.
В обоих случаях ума не хватило.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style  type="text/css">
.main {
  width: 900px;
  margin: 0px auto;
}
.video {
  width: 560px;
  height: 415px;
  background-color: #eeeeee;
}
.subscribe {
  width: 320px;
  height: 415px;
  float: right;
  margin-left: 20px;
  background-color: red;
}
p {
  margin: 0px;
  color: white;
}
form {
  opacity: 0;
  display: block;
  width: 320px;
  height: 415px;
  background-color: #111111;
}
form:hover{
  opacity: 1;
}
.email {
  display: block;
  width: 238px;
  height: 40px;
  padding: 0px 15px;
  margin: 10px auto;
  border:1px solid #aaaaaa;
}
.submit {
  display: block;
  width: 268px;
  height: 43px;
  margin: 10px auto;
  border:1px solid #6c6f8e;
  background-color: #6c6f8e;
  color:#ffffff;
}
</style>
</head>
<body>

<div class="main">
<div class="subscribe">
  <form>
  <p>Здесь текст или список на всю длину блока до формы внизу</p>
    <input type="text" class="email" placeholder="Введите email" />
    <input type="submit" class="submit" value="Подписаться" />
  </form>
</div>  
<div class="video">Здесь видео</div>
</div><!-- .main -->

</body></html>

Если способ не найдется - сделаю на jQuery (палочка выручалочка для таких как я), но подключать всю библиотеку ради одной крошечной функции очень не хочется.

Форум

Справочник

Discord чат

Курсы javascript