Спойлер, который показывается при наведении:
<p>
<span class="spoiler">Никто не</span> умер в конце Драйва</span>
</p>
.exSpoiler {
filter: blur(7px);
transition: .1s;
}
.exSpoiler:hover {
filter: blur(0);
}
Никто не умер в конце Драйва
На мобиле
В большинстве мобильных браузеров :hover срабатывает при нажатии на элемент. Это неочевидное и неявное поведение, но на него частенько полагаются. В целом можно оставить такую вёрстку, она будет работать на большинстве мобил. Но если хотите сделать по фен‑шую, используйте Яваскрипт:
<p>
<span class="spoiler">Никто не</span> умер в конце Драйва</span>
</p>
.exSpoiler {
filter: blur(7px);
transition: .1s;
}
// Внимание! Меняем :hover на класс
.exSpoiler.visible {
filter: blur(0);
}
// Запускаем скрипт только когда все элементы страницы загружены
document.addEventListener('DOMContentLoaded', () => {
// Для всех спойлеров
document.querySelectorAll('.spoiler').forEach($el => {
// Переключаем класс при наведении и уводе курсора
$el.addEventListener('mouseenter', () => {
$el.classList.add('visible')
})
$el.addEventListener('mouseleave', () => {
$el.classList.remove('visible')
})
// Переключаем класс при нажатии
$el.addEventListener('click', () => {
$el.classList.toggle('visible')
})
})
})
Никто не умер в конце Драйва
Бонус: размытый тизер
Перед анонсом Бюросферы Про, в шапке сайта бюро появился размытый пункт меню. Но поскольку любой ЦСС‑эффект можно снять через инструменты разработчика, вместо реального текста скрывался случайный набор букв (но первая всегда «Б»), буквы менялись при наведении.
Можете смело украсть подсмотреть идею и код для своих проектов. В примере неразмытый дубль текста для наглядности:
<span class="teaser">Быйрг</span>
.teaser {
filter: blur(3px);
}
const LETTERS = "авгеёзийкмностхцчъыьэя";
// Запускаем скрипт только когда все элементы страницы загружены
document.addEventListener("DOMContentLoaded", () => {
// Для всех тизеров
document.querySelectorAll(".teaser").forEach($el => {
// При наведении ставим случайный набор букв, первая всегда Б
$el.addEventListener("mouseenter", () => {
let text = "Б"
while (text.length <= 4) {
text += LETTERS[Math.floor(Math.random() * LETTERS.length)]
}
$el.textContent = text
})
})
})
P. S. Набор букв в примере с сайта бюро — не полный, и у этого есть две причины. Предлагаю уважаемым советчикам попробовать угадать их в коментах. Подсказка — в новом пункте меню.
P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.