15.03.2015, 16:56
|
|
Кандидат Javascript-наук
|
|
Регистрация: 18.09.2014
Сообщений: 128
|
|
|
Как сделать так, чтобы onmouseout учитывал увеличившийся размер контейнера?
Возьмём вот такой код:
<span id="one" onmouseover="AddString()" onmouseout="RemoveString()">Pervaya Stroka
<span id="two" style="display:block"></span>
</span>
<script>
function AddString() {
document.getElementById("two").innerHTML = 'VtorayaStroka';
}
function RemoveString() {
document.getElementById("two").innerHTML = '';
}
</script>
Когда наводишь мышкой на "Pervaya Stroka", скрипт добавляет вторую строку. Когда уводишь курсор с первой строки, вторая строка исчезает.
Надо: Когда наводишь мышкой на "Pervaya Stroka", скрипт добавляет вторую строку. Когда уводишь курсор с первой строки В ЛЮБОЕ МЕСТО, КРОМЕ ВТОРОЙ СТРОКИ, вторая строка исчезает.
Если честно, текущих знаний мне не хватило, чтобы это реализовать.
Что я пробовал:
<span id="one" onmouseover="AddString()">Pervaya Stroka
<span id="two" style="display:block"></span>
</span>
<script>
function AddString() {
var element = document.getElementById("one");
element.removeEventListener("mouseover", AddString);
document.getElementById("two").innerHTML = 'VtorayaStroka';
element.addEventListener("mouseout", RemoveString, true);
}
function RemoveString() {
var element = document.getElementById("two");
element.removeEventListener("mouseout", RemoveString);
element.innerHTML = '';
element.addEventListener("mousever", AddString, true);
}
</script>
с расчётом на то, что если удалить ивент и сразу его добавить, то скрипт пересчитает высоту контейнера. Ан-нет - результат тот же.
Как добиться нужного результата?
Последний раз редактировалось jaroslav.tavgen, 15.03.2015 в 17:01.
Причина: Ошибка в названии темы
|
|
15.03.2015, 17:02
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
jaroslav.tavgen,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#one:hover+#two,#two:hover {
display: block;
}
#two{
display: none;
}
</style>
</head>
<body>
<span id="one">Pervaya Stroka</span>
<span id="two">VtorayaStroka</span>
</body>
</html>
|
|
15.03.2015, 17:04
|
|
Кандидат Javascript-наук
|
|
Регистрация: 18.09.2014
Сообщений: 128
|
|
|
Рони, то же самое. При наведении с первой строки на вторую, вторая строка исчезает
(нужно тестировать, сделав большой зум в браузере и медленно двигая мышку, иначе в какой-то момент действительно почему-то курсор "проскочит" и вторая строка сохранится - от чего это зависит, я пока не понимаю)
Последний раз редактировалось jaroslav.tavgen, 15.03.2015 в 17:13.
|
|
15.03.2015, 17:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
jaroslav.tavgen,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#one:hover+#two,#two:hover {
height: 30px;
transition-delay: 0s;
}
#two{
transition-delay: .3s;
display: block;
height: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<span id="one">Pervaya Stroka</span>
<span id="two">VtorayaStroka</span>
</body>
</html>
|
|
15.03.2015, 17:37
|
|
Кандидат Javascript-наук
|
|
Регистрация: 18.09.2014
Сообщений: 128
|
|
|
рони, спасибо! Выглядит рабочим вариантом.
|
|
15.03.2015, 18:04
|
|
Кандидат Javascript-наук
|
|
Регистрация: 18.09.2014
Сообщений: 128
|
|
|
рони, а есть вариант, при котором бы скрипт так же сработал при втором span, находящемся внутри первого? И чтобы было не средствами CSS, а средствами javascript?
Дело в том, что в реальном приложении второй span заполняется аяксовским запросом каждый раз при наведении мыши, а если делать 2 span'a не вложенными 1 в другой, то там нарушается расположение объектов... Мне явно надо подучить CSS, чтобы лучше контроллировать такие моменты, но хотелось бы эту конкретную проблему решить побыстрее...
|
|
15.03.2015, 18:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
|
Сообщение от jaroslav.tavgen
|
|
при втором span, находящемся внутри первого?
|
#one:hover >#two |
|
15.03.2015, 19:15
|
|
Кандидат Javascript-наук
|
|
Регистрация: 18.09.2014
Сообщений: 128
|
|
Сообщение от рони
|
|
#one:hover>#two
|
Спасибо! Работает. Попробую внедрить этот вариант, но может быть, кто-нибудь знает вариант не с CSS, а с JS?
Последний раз редактировалось jaroslav.tavgen, 15.03.2015 в 19:18.
|
|
17.03.2015, 15:58
|
|
Кандидат Javascript-наук
|
|
Регистрация: 18.09.2014
Сообщений: 128
|
|
Нет, рано переходить на CSS.
Я не понимаю, какого РОЖНА вот этот код не работает?!
<span id="one" onmouseover="AddString()">Pervaya Stroka
<span id="two" style="display:block"></span>
</span>
<script>
function AddString() {
var element = document.getElementById("one");
element.removeEventListener("mouseover", AddString);
document.getElementById("two").innerHTML = 'VtorayaStroka';
element.addEventListener("mouseout", RemoveString, true);
}
function RemoveString() {
var element = document.getElementById("two");
element.removeEventListener("mouseout", RemoveString);
element.innerHTML = '';
element.addEventListener("mousever", AddString, true);
}
</script>
Смотрите, есть контейнер. После наведения мыши ВЫСОТА КОНТЕЙНЕРА УВЕЛИЧИВАЕТСЯ. _ПОСЛЕ_ этого добавляется ивент "mouseout", который должен учитывать контейнер в НОВОМ состоянии (он вообще не должен "знать", каким он был первоначально).
Нет же, когда наводишь мышкой в то место, куда увеличился контейнер - он исчезает.
Как это может быть?! Тут логики же никакой. Дело в скорости загрузки? Объект не успел обновить данные? Кэш работает? Или что?
Объясните, пожалуйста.
|
|
17.03.2015, 16:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
|
jaroslav.tavgen,
строка 30
|
|
|
|
