Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.01.2023, 00:01
Новичок на форуме
Отправить личное сообщение для Iv_Zh Посмотреть профиль Найти все сообщения от Iv_Zh
 
Регистрация: 05.01.2023
Сообщений: 3

Создание меню (появление/исчезновение при наведении)
Всем Привет!
Помогите, пожалуйста, решить.

Пример - условный
Есть список
<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 день не могу решить - пожалуйста, помогите
Ответить с цитированием
  #2 (permalink)  
Старый 06.01.2023, 00:27
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,725

Медитируем над событиями mouseenter и mouseleve

Нельзя в <a> вставлять <li>. <li> можно только в <ol> или <ul>
Наоборот <li><a href="***> text</a></li> - можно.

Последний раз редактировалось voraa, 06.01.2023 в 00:30.
Ответить с цитированием
  #3 (permalink)  
Старый 06.01.2023, 00:54
Новичок на форуме
Отправить личное сообщение для Iv_Zh Посмотреть профиль Найти все сообщения от Iv_Zh
 
Регистрация: 05.01.2023
Сообщений: 3

спасибо
в частности не получается сделать чтобы открытый блок закрывался
Ответить с цитированием
  #4 (permalink)  
Старый 06.01.2023, 10:00
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,725

Так покажите, как вы делаете.
Ответить с цитированием
  #5 (permalink)  
Старый 06.01.2023, 12:55
Новичок на форуме
Отправить личное сообщение для Iv_Zh Посмотреть профиль Найти все сообщения от Iv_Zh
 
Регистрация: 05.01.2023
Сообщений: 3

Самое близкое к тому, что надо:

<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>
Ответить с цитированием
  #6 (permalink)  
Старый 06.01.2023, 13:40
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,725

Почитайте про разницу между 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Раскрывающееся вертикальное меню при наведении Igorsrt Элементы интерфейса 2 08.01.2018 17:58
При наведении пропадает меню Paracitomol jQuery 0 05.07.2013 19:50
CSS меню => скрыть при нажатии Shasoft Элементы интерфейса 1 15.05.2012 20:01
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05