Создание меню (появление/исчезновение при наведении)
Всем Привет!
Помогите, пожалуйста, решить. Пример - условный Есть список <ul> <a id="1" href=""><li>{{ i }}</li></a> <a id="2" href=""><li>{{ i }}</li></a> <a id="3" href=""><li>{{ i }}</li></a> <a id="4" href=""><li>{{ i }}</li></a> <a id="5" href=""><li>{{ i }}</li></a> </ul> Есть блоки <div id="1-1"></div> <div id="1-2"></div> <div id="1-3"></div> <div id="1-4"></div> <div id="1-5"></div> Действие такое: При наведении на любой элемент из списка появляется соответствующий ему блок (none -> block). Например: Наводим на <a id="1" href=""><li>{{ i }}</li></a> Появляется <div id="1-1"></div> При наведении на любой другой элемент из списка - открытый блок исчезает, а появляется тот который соответствует наведенному элементу из списка. Например Наводим на <a id="2" href=""><li>{{ i }}</li></a> Исчезает <div id="1-1"></div> Появляется <div id="1-2"></div> Особая сложность - как прописать 2 действия (появление одного и исчезновение блока) под одно событие (наведение на элемент списка) 2 день не могу решить - пожалуйста, помогите |
Медитируем над событиями mouseenter и mouseleve
Нельзя в <a> вставлять <li>. <li> можно только в <ol> или <ul> Наоборот <li><a href="***> text</a></li> - можно. |
спасибо
в частности не получается сделать чтобы открытый блок закрывался |
Так покажите, как вы делаете.
|
Самое близкое к тому, что надо:
<div class="category" > <ul class="category_list"> {% for i in categories %} <li onmouseover="document.getElementById('{{ i.slug }}').style.display='block';" onmouseout="document.getElementById('{{ i.slug }}').style.display='none';"> <a id={{ i.id }} class="category-name" href="">{{ i }}</a></li> {% endfor %} </ul> </div> {% for i in categories %} <div id="{{ i.slug }}" class="subcategory" onmouseover="document.getElementById('{{ i.slug }}').style.display='block';" onmouseout="document.getElementById('{{ i.slug }}').style.display='none';"> </div> |
Почитайте про разницу между mouseleave и mouseout
<head>
<style>
div {
display:none;
width:100px;
height:100px;
border: solid 1px blue;
}
</style>
</head>
<body>
<ul>
<li onmouseover="document.getElementById('bi1').style.display='block'"
onmouseleave="document.getElementById('bi1').style.display='none';">
<a id="i1"href="" >11111</a>
</li>
<li onmouseover="document.getElementById('bi2').style.display='block'"
onmouseleave="document.getElementById('bi2').style.display='none';">
<a id="i3"href="" >22222</a>
</li>
<li onmouseover="document.getElementById('bi3').style.display='block'"
onmouseleave="document.getElementById('bi3').style.display='none';">
<a id="i3"href="" >33333</a>
</li>
</ul>
<div id="bi1">1111</div>
<div id="bi2">2222</div>
<div id="bi3">3333</div>
</body>
|
| Часовой пояс GMT +3, время: 22:16. |