Форум

Iv_Zh · #1 (**permalink**) 06.01.2023, 00:01

Всем Привет!
Помогите, пожалуйста, решить.

Пример - условный
Есть список
<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 день не могу решить - пожалуйста, помогите

voraa · #2 (**permalink**) 06.01.2023, 00:27

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

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

Iv_Zh · #3 (**permalink**) 06.01.2023, 00:54

спасибо
в частности не получается сделать чтобы открытый блок закрывался

voraa · #4 (**permalink**) 06.01.2023, 10:00

Так покажите, как вы делаете.

Iv_Zh · #5 (**permalink**) 06.01.2023, 12:55

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

<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>

voraa · #6 (**permalink**) 06.01.2023, 13:40

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

Форум

Справочник

Discord чат

Курсы javascript