Сделать активным div при активации в нем input
Приветствую, друзья.
Всю жизнь ваял страницы без динамических элементов, но времена меняются - придется учить js. Дано: Есть страница с первым уроком курса. А в сайдбаре большой блок с надписью "Урок 2: название_урока". При наведении туда мышкой (hover) на месте блока появляется верхний блок с текстом: "уроки 2-5 можете получить в рассылке" и формой подписки (все это до наведения просто было прозрачным). Проблема в том, что как только мышку уводишь - снова открывается нижний блок. Так должно быть только если форма неактивна. А если человек начал вводить что-то - форма (и весь верхний блок) уже не должна исчезать. Подскажите, какие варианты можно применить для таких целей? |
<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>
|
Без кода сложно что-то подсказать. Как вариант: проверять есть ли фокус на поле, если есть, то ничего не делать.
|
<!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>
|
tsigel,
у меня твой код в последнем FF не работает, инпут в фокусе скрывается есть курсор отвести. |
Safort,
да, надо было на фокус повесить блок :( |
Примерный набросок того, что нужно.
На месте красного фона будет изображение "Урок 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 (палочка выручалочка для таких как я), но подключать всю библиотеку ради одной крошечной функции очень не хочется. |
| Часовой пояс GMT +3, время: 20:45. |