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