Как сделать так, чтобы 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,
<!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>
|
Рони, то же самое. При наведении с первой строки на вторую, вторая строка исчезает
(нужно тестировать, сделав большой зум в браузере и медленно двигая мышку, иначе в какой-то момент действительно почему-то курсор "проскочит" и вторая строка сохранится - от чего это зависит, я пока не понимаю) |
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>
|
рони, спасибо! Выглядит рабочим вариантом.
|
рони, а есть вариант, при котором бы скрипт так же сработал при втором span, находящемся внутри первого? И чтобы было не средствами CSS, а средствами javascript?
Дело в том, что в реальном приложении второй span заполняется аяксовским запросом каждый раз при наведении мыши, а если делать 2 span'a не вложенными 1 в другой, то там нарушается расположение объектов... Мне явно надо подучить CSS, чтобы лучше контроллировать такие моменты, но хотелось бы эту конкретную проблему решить побыстрее... |
Цитата:
|
Цитата:
|
Нет, рано переходить на 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", который должен учитывать контейнер в НОВОМ состоянии (он вообще не должен "знать", каким он был первоначально). Нет же, когда наводишь мышкой в то место, куда увеличился контейнер - он исчезает. Как это может быть?! Тут логики же никакой. Дело в скорости загрузки? Объект не успел обновить данные? Кэш работает? Или что? Объясните, пожалуйста. |
jaroslav.tavgen,
строка 30 |
| Часовой пояс GMT +3, время: 11:56. |