Шаблон:Hover: различия между версиями
Als (обсуждение | вклад) Нет описания правки |
Als (обсуждение | вклад) Нет описания правки |
||
| Строка 1: | Строка 1: | ||
<noinclude> | <noinclude> | ||
Шаблон позволяет заменить изображение или текст при наведении курсора мыши. | Шаблон позволяет заменить изображение или текст при наведении курсора мыши — плавно и красиво. | ||
== Как использовать == | == Как использовать == | ||
| Строка 8: | Строка 8: | ||
</pre> | </pre> | ||
* '''Первоначальное содержимое''' — то, что видно по умолчанию | * '''Первоначальное содержимое''' — то, что видно по умолчанию. | ||
* '''Содержимое при наведении''' — | * '''Содержимое при наведении''' — появляется при наведении. | ||
* Необязательные параметры: | * Необязательные параметры: | ||
** '''До=''' — текст или элементы перед контейнером. | ** '''До=''' — текст или элементы перед контейнером. | ||
| Строка 23: | Строка 23: | ||
Что делает: | Что делает: | ||
* По умолчанию отображается [[File:Example.jpg|200px]]. | * По умолчанию отображается [[File: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: | ||
== Примечания == | == Примечания == | ||
* Убедитесь, что файлы существуют в вики. | * Убедитесь, что файлы существуют в вики. | ||
* Можно использовать любые валидные вики-элементы | * Можно использовать любые валидные вики-элементы. | ||
* | * Плавная анимация работает во всех современных браузерах. | ||
</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; | ||
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 { | ||
opacity: 1; | |||
visibility: visible; | |||
} | } | ||
}} | }} | ||
Версия от 11:19, 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
)
Примечания
- Убедитесь, что файлы существуют в вики.
- Можно использовать любые валидные вики-элементы.
- Плавная анимация работает во всех современных браузерах.
{{{1}}} {{{2}}}