9,036
edits
MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 14: | Line 14: | ||
word-wrap: break-word; /* Перенос длинных слов на следующую строку */ | word-wrap: break-word; /* Перенос длинных слов на следующую строку */ | ||
box-sizing: border-box; /* Учитываем рамку и отступы в размерах */ | box-sizing: border-box; /* Учитываем рамку и отступы в размерах */ | ||
position: relative; /* | position: relative; /* Для позиционирования псевдоэлемента */ | ||
transition: background-color 0.4s ease, color 0.4s ease; /* Плавный переход для фона и цвета текста */ | |||
transition: background-color 0.4s ease, color 0.4s ease | } | ||
li.explore-adaptive-item::before { | |||
content: ""; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
background-image: url('ваш_путь_к_картинке'); /* Замените на путь к вашей картинке */ | |||
background-size: cover; /* Масштабируем картинку чтобы покрывала весь элемент */ | |||
background-repeat: no-repeat; /* Отключаем повтор картинки */ | |||
background-position: center; /* Центрируем картинку */ | |||
opacity: 0; /* Картинка изначально скрыта */ | |||
transition: opacity 0.4s ease; /* Плавный переход для появления картинки */ | |||
border-radius: 10px; /* Закругленные углы для картинки */ | |||
z-index: 0; /* Размещение позади текста */ | |||
} | |||
li.explore-adaptive-item:hover::before { | |||
opacity: 0.5; /* Картинка становится полупрозрачной при наведении */ | |||
} | } | ||
| Line 23: | Line 43: | ||
border-color: #FFC107; /* Ярче цвет рамки при наведении */ | border-color: #FFC107; /* Ярче цвет рамки при наведении */ | ||
color: #D02019; /* Цвет текста при наведении */ | color: #D02019; /* Цвет текста при наведении */ | ||
} | } | ||
/* Убедимся, что текст не меняет других стилей при наведении */ | |||
li.explore-adaptive-item:hover * { | |||
position: relative; | |||
z-index: 1; /* Текст размещается поверх картинки */ | |||
color: inherit; /* Сохраняем цвет текста при наведении */ | |||
text-decoration: none; /* Убираем возможные подчеркивания */ | |||
} | |||
/* Убедимся, что текст не меняет других стилей при наведении */ | /* Убедимся, что текст не меняет других стилей при наведении */ | ||