Возьмём вот такой код:
<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>
с расчётом на то, что если удалить ивент и сразу его добавить, то скрипт пересчитает высоту контейнера. Ан-нет - результат тот же.
Как добиться нужного результата?