Шаблон:Hover: различия между версиями
Als (обсуждение | вклад) Нет описания правки |
Als (обсуждение | вклад) Нет описания правки |
||
Строка 1: | Строка 1: | ||
<noinclude> | <noinclude> | ||
Шаблон позволяет заменить | Шаблон позволяет заменить изображение или текст при наведении курсора мыши. | ||
== Как использовать == | |||
Вставьте шаблон в формате: | |||
<pre> | |||
{{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> | </pre> | ||
Что делает: | |||
* По умолчанию отображается [[File:Example.jpg|200px]]. | |||
* При наведении заменяется на [[File:Hover_Example.jpg|200px]]. | |||
=== С текстом === | |||
Код: | |||
<pre> | |||
{{Hover|Наведи на меня|А вот и я!}} | |||
</pre> | |||
Что делает: | |||
* По умолчанию видно: "Наведи на меня". | |||
* При наведении появляется: "А вот и я!". | |||
=== С дополнительным текстом (До/После) === | |||
Код: | |||
<pre> | |||
{{Hover|До=( |[[File:Example.jpg|150px]]|[[File:Hover_Example.jpg|150px]]|После= )}} | |||
</pre> | |||
Результат: | |||
( [изображение] ) → при наведении ( [другое изображение] ) | |||
== Примечания == | |||
* Убедитесь, что файлы существуют в вики. | |||
* Можно использовать любые валидные вики-элементы: ссылки, кнопки, иконки и т.д. | |||
* Работает в браузерах, поддерживающих 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__content { | .hover__content { |
Версия от 11:17, 4 августа 2025
Шаблон позволяет заменить изображение или текст при наведении курсора мыши.
Как использовать
Вставьте шаблон в формате:
{{Hover|Первоначальное содержимое|Содержимое при наведении|До=|После=}}
- Первоначальное содержимое — то, что видно по умолчанию (например, изображение или текст).
- Содержимое при наведении — то, что появится при наведении курсора.
- Необязательные параметры:
- До= — текст или элементы перед контейнером.
- После= — текст или элементы после контейнера.
Примеры
С изображениями
Код:
{{Hover|[[File:Example.jpg|200px]]|[[File:Hover_Example.jpg|200px]]}}
Что делает:
- По умолчанию отображается Файл:Example.jpg.
- При наведении заменяется на Файл:Hover Example.jpg.
С текстом
Код:
{{Hover|Наведи на меня|А вот и я!}}
Что делает:
- По умолчанию видно: "Наведи на меня".
- При наведении появляется: "А вот и я!".
С дополнительным текстом (До/После)
Код:
{{Hover|До=( |[[File:Example.jpg|150px]]|[[File:Hover_Example.jpg|150px]]|После= )}}
Результат: ( [изображение] ) → при наведении ( [другое изображение] )
Примечания
- Убедитесь, что файлы существуют в вики.
- Можно использовать любые валидные вики-элементы: ссылки, кнопки, иконки и т.д.
- Работает в браузерах, поддерживающих CSS :hover (все современные).
{{{1}}}{{{2}}}