Шаблон:Hover - История изменений

Als в 11:32, 4 августа 2025

2025-08-04T11:32:51Z

← Предыдущая версия		Версия от 11:32, 4 августа 2025
Строка 1:		Строка 1:

	<noinclude>		<noinclude>
	Шаблон позволяет заменить изображение или текст при наведении курсора мыши ~~— плавно и красиво~~.		Шаблон позволяет заменить изображение или текст при наведении курсора мыши.

	== Как использовать ==		== Как использовать ==
			Вставьте шаблон в формате:
	<pre>		<pre>
	{{Hover\|Первоначальное содержимое\|Содержимое при наведении\|До=\|После=}}		{{Hover\|Первоначальное содержимое\|Содержимое при наведении\|До=\|После=}}
	</pre>		</pre>

	* '''Первоначальное содержимое''' — ~~отображается~~ по умолчанию.		* '''Первоначальное содержимое''' — то, что видно по умолчанию (например, изображение или текст).
	* '''Содержимое при наведении''' — ~~появляется~~ при наведении.		* '''Содержимое при наведении''' — то, что появится при наведении курсора.
	* '''До=''' — ~~опционально, до контейнера~~.		* Необязательные параметры:
	* '''После=''' — ~~опционально,~~ после контейнера.		** '''До=''' — текст или элементы перед контейнером.
			** '''После=''' — текст или элементы после контейнера.

	== Примеры ==		== Примеры ==

	=== ~~Изображения~~ ===		=== С изображениями ===
			Код:
			<pre>
	{{Hover\|[[File:Example.jpg\|200px]]\|[[File:Hover_Example.jpg\|200px]]}}		{{Hover\|[[File:Example.jpg\|200px]]\|[[File:Hover_Example.jpg\|200px]]}}
			</pre>
			Что делает:
			* По умолчанию отображается [[File:Example.jpg\|200px]].
			* При наведении заменяется на [[File:Hover_Example.jpg\|200px]].

			{{Hover\|[[File:Example.jpg\|200px]]\|[[File:Hover_Example.jpg\|200px]]}}

			=== С текстом ===
			Код:
			<pre>
			{{Hover\|Наведи на меня\|А вот и я!}}
			</pre>
			Что делает:
			* По умолчанию видно: "Наведи на меня".
			* При наведении появляется: "А вот и я!".

	~~=== Текст ===~~
	{{Hover\|Наведи на меня\|А вот и я!}}		{{Hover\|Наведи на меня\|А вот и я!}}

	=== С дополнительным текстом ===		=== С дополнительным текстом (До/После) ===
			Код:
			<pre>
			{{Hover\|До=( \|[[File:Example.jpg\|150px]]\|[[File:Hover_Example.jpg\|150px]]\|После= )}}
			</pre>
			Результат:
			( [изображение] ) → при наведении ( [другое изображение] )

	{{Hover\|До=( \|[[File:Example.jpg\|150px]]\|[[File:Hover_Example.jpg\|150px]]\|После= )}}		{{Hover\|До=( \|[[File:Example.jpg\|150px]]\|[[File:Hover_Example.jpg\|150px]]\|После= )}}

	== Примечания ==		== Примечания ==
	* Убедитесь, что файлы существуют.		* Убедитесь, что файлы существуют в вики.
	* ~~Для работы анимации должен быть добавлен~~ CSS ~~в MediaWiki~~:~~Common.css~~.		* Можно использовать любые валидные вики-элементы: ссылки, кнопки, иконки и т.д.
			* Работает в браузерах, поддерживающих CSS :hover (все современные).
	</noinclude>		</noinclude>

	<span class="hover__container">{{{До\|}}}		<span class="hover__container">{{{До\|}}}<span class="hover__default-content">{{{1}}}</span><span class="hover__content">{{{2}}}</span>{{{После\|}}}</span>
	<span class="hover__default-content">{{{1}}}</span>
	<span class="hover__content">{{{2}}}</span>		{{#css:
	{{{После\|}}}</span>		.hover__content {
			top: 0;
			left: 0;
			display: none;
			}
			.hover__container:hover .hover__content {
			display: inline;
			}
			.hover__container:hover .hover__default-content {
			display: none;
			}
			}}

Als в 11:20, 4 августа 2025

2025-08-04T11:20:37Z

@@ Строка 3: / Строка 3: @@
 == Как использовать ==
 <pre>
 {{Hover|Первоначальное содержимое|Содержимое при наведении|До=|После=}}
 </pre>
-* '''Первоначальное содержимое''' — то, что видно по умолчанию.
+* '''Первоначальное содержимое''' — отображается по умолчанию.
 * '''Содержимое при наведении''' — появляется при наведении.
-* Необязательные параметры:
+* '''До=''' — опционально, до контейнера.
-** '''До=''' — текст или элементы перед контейнером.
+* '''После=''' — опционально, после контейнера.
 == Примеры ==
-=== С изображениями ===
+=== Изображения ===
 {{Hover|[[File:Example.jpg|200px]]|[[File:Hover_Example.jpg|200px]]}}
 {{Hover|Наведи на меня|А вот и я!}}
-=== С дополнительным текстом (До/После) ===
+=== С дополнительным текстом ===
 {{Hover|До=( |[[File:Example.jpg|150px]]|[[File:Hover_Example.jpg|150px]]|После= )}}
 == Примечания ==
-* Убедитесь, что файлы существуют в вики.
+* Убедитесь, что файлы существуют.
-* Можно использовать любые валидные вики-элементы.
+* Для работы анимации должен быть добавлен CSS в MediaWiki:Common.css.
 </noinclude>
@@ Строка 58: / Строка 32: @@
    <span class="hover__content">{{{2}}}</span>
 {{{После|}}}</span>

Als в 11:19, 4 августа 2025

2025-08-04T11:19:17Z

← Предыдущая версия		Версия от 11:19, 4 августа 2025
Строка 1:		Строка 1:
	<noinclude>		<noinclude>
	Шаблон позволяет заменить изображение или текст при наведении курсора мыши.		Шаблон позволяет заменить изображение или текст при наведении курсора мыши — плавно и красиво.

	== Как использовать ==		== Как использовать ==
Строка 8:		Строка 8:
	</pre>		</pre>

	* '''Первоначальное содержимое''' — то, что видно по умолчанию ~~(например, изображение или текст)~~.		* '''Первоначальное содержимое''' — то, что видно по умолчанию.
	* '''Содержимое при наведении''' — ~~то, что появится~~ при наведении ~~курсора~~.		* '''Содержимое при наведении''' — появляется при наведении.
	* Необязательные параметры:		* Необязательные параметры:
	** '''До=''' — текст или элементы перед контейнером.		** '''До=''' — текст или элементы перед контейнером.
Строка 23:		Строка 23:
	Что делает:		Что делает:
	* По умолчанию отображается [[File:Example.jpg\|200px]].		* По умолчанию отображается [[File:Example.jpg\|200px]].
	* При наведении ~~заменяется~~ на [[File:Hover_Example.jpg\|200px]].		* При наведении плавно меняется на [[File:Hover_Example.jpg\|200px]].

	{{Hover\|[[File:Example.jpg\|200px]]\|[[File:Hover_Example.jpg\|200px]]}}		{{Hover\|[[File:Example.jpg\|200px]]\|[[File:Hover_Example.jpg\|200px]]}}
Строка 33:		Строка 33:
	</pre>		</pre>
	Что делает:		Что делает:
	* По умолчанию ~~видно~~: "Наведи на меня".		* По умолчанию: "Наведи на меня".
	* При наведении появляется: "А вот и я!".		* При наведении: плавно появляется "А вот и я!".

	{{Hover\|Наведи на меня\|А вот и я!}}		{{Hover\|Наведи на меня\|А вот и я!}}
Строка 50:		Строка 50:
	== Примечания ==		== Примечания ==
	* Убедитесь, что файлы существуют в вики.		* Убедитесь, что файлы существуют в вики.
	* Можно использовать любые валидные вики-элементы~~: ссылки, кнопки, иконки и т.д~~.		* Можно использовать любые валидные вики-элементы.
	* ~~Работает в~~ браузерах~~, поддерживающих CSS :hover (все современные)~~.		* Плавная анимация работает во всех современных браузерах.
	</noinclude>		</noinclude>

	<span class="hover__container">{{{До\|}}}<span class="hover__default-content">{{{1}}}</span><span class="hover__content">{{{2}}}</span>{{{После\|}}}</span>		<span class="hover__container">{{{До\|}}}
			<span class="hover__default-content">{{{1}}}</span>
			<span class="hover__content">{{{2}}}</span>
			{{{После\|}}}</span>

	{{#css:		{{#css:
			/* Контейнер — обеспечивает правильное позиционирование */
			.hover__container {
			display: inline-block;
			position: relative;
			cursor: default;
			}

			/* Базовое содержимое (по умолчанию) */
			.hover__default-content,
	.hover__content {		.hover__content {
			position: absolute;
	top: 0;		top: 0;
	left: 0;		left: 0;
	~~display~~: ~~none~~;		transition: opacity 0.3s ease, visibility 0.3s ease;
			opacity: 1;
			visibility: visible;
			}

			/* Скрытие при наведении */
			.hover__container:hover .hover__default-content {
			opacity: 0;
			visibility: hidden;
	}		}

			/* Показ нового содержимого при наведении */
			.hover__content {
			opacity: 0;
			visibility: hidden;
			}

	.hover__container:hover .hover__content {		.hover__container:hover .hover__content {
	~~display~~: ~~inline~~;		opacity: 1;
	}		visibility: visible;
	~~.hover__container:hover .hover__default-content {~~
	~~display~~: ~~none~~;
	}		}
	}}		}}

Als в 11:18, 4 августа 2025

2025-08-04T11:18:09Z

← Предыдущая версия		Версия от 11:18, 4 августа 2025
Строка 24:		Строка 24:
	* По умолчанию отображается [[File:Example.jpg\|200px]].		* По умолчанию отображается [[File:Example.jpg\|200px]].
	* При наведении заменяется на [[File:Hover_Example.jpg\|200px]].		* При наведении заменяется на [[File:Hover_Example.jpg\|200px]].

			{{Hover\|[[File:Example.jpg\|200px]]\|[[File:Hover_Example.jpg\|200px]]}}

	=== С текстом ===		=== С текстом ===
Строка 33:		Строка 35:
	* По умолчанию видно: "Наведи на меня".		* По умолчанию видно: "Наведи на меня".
	* При наведении появляется: "А вот и я!".		* При наведении появляется: "А вот и я!".

			{{Hover\|Наведи на меня\|А вот и я!}}

	=== С дополнительным текстом (До/После) ===		=== С дополнительным текстом (До/После) ===
Строка 41:		Строка 45:
	Результат:		Результат:
	( [изображение] ) → при наведении ( [другое изображение] )		( [изображение] ) → при наведении ( [другое изображение] )

			{{Hover\|До=( \|[[File:Example.jpg\|150px]]\|[[File:Hover_Example.jpg\|150px]]\|После= )}}

	== Примечания ==		== Примечания ==

Als в 11:17, 4 августа 2025

2025-08-04T11:17:02Z

@@ Строка 1: / Строка 1: @@
 <noinclude>
-Шаблон позволяет заменить картинку (или даже текст) при наведении.<br>
+Шаблон позволяет заменить изображение или текст при наведении курсора мыши.
-Пример использования:
 <pre>
 {{Hover|[[File:Example.jpg|200px]]|[[File:Hover_Example.jpg|200px]]}}
 </pre>
 </noinclude>
 <span class="hover__container">{{{До|}}}<span class="hover__default-content">{{{1}}}</span><span class="hover__content">{{{2}}}</span>{{{После|}}}</span>
 {{#css:
 .hover__content {

Als в 11:15, 4 августа 2025

2025-08-04T11:15:53Z

← Предыдущая версия		Версия от 11:15, 4 августа 2025
Строка 1:		Строка 1:
	<noinclude>Шаблон позволяет заменить картинку (или даже текст) при наведении<br><~~!--~~		<noinclude>
			Шаблон позволяет заменить картинку (или даже текст) при наведении.<br>
	--></noinclude><span class="hover__container">{{{До\|}}}<span class="hover__default-content">{{{1}}}</span><span class="hover__content">{{{2}}}</span>{{{После\|}}}</span>		Пример использования:
			<pre>
			{{Hover\|[[File:Example.jpg\|200px]]\|[[File:Hover_Example.jpg\|200px]]}}
			</pre>
			</noinclude>
			<span class="hover__container">{{{До\|}}}<span class="hover__default-content">{{{1}}}</span><span class="hover__content">{{{2}}}</span>{{{После\|}}}</span>
	{{#css:		{{#css:
	.hover__content {		.hover__content {
	top: 0;		top: 0;
	left: 0;		left: 0;
	display: none;		display: none;
	}		}
	.hover__container:hover .hover__content {		.hover__container:hover .hover__content {
	display: inline;		display: inline;
	}		}
	.hover__container:hover .hover__default-content {		.hover__container:hover .hover__default-content {
	display: none;		display: none;
	}		}
	}}		}}

Als: Новая страница: «Шаблон позволяет заменить картинку (или даже текст) при наведении
{{{До|}}}{{{1}}}{{{2}}}{{{После|}}} {{#css: .hovercontent { top: 0; left: 0; display: none; } .hovercontainer:hover .hovercontent { display: inline; } .hovercontainer:ho...»

2025-08-04T11:14:09Z

Новая страница: «<noinclude>Шаблон позволяет заменить картинку (или даже текст) при наведении </noinclude>{{{До|}}}{{{1}}}{{{2}}}{{{После|}}} {{#css: .hover__content { top: 0; left: 0; display: none; } .hover__container:hover .hover__content { display: inline; } .hover__container:ho...»

Новая страница

<noinclude>Шаблон позволяет заменить картинку (или даже текст) при наведении </noinclude>{{{До|}}}{{{1}}}{{{2}}}{{{После|}}}
{{#css:
.hover__content {
top: 0;
left: 0;
display: none;
}
.hover__container:hover .hover__content {
display: inline;
}
.hover__container:hover .hover__default-content {
display: none;
}
}}