Как по клику изменить текст, используя css?
Получил интересное задание, но уже сломал голову, как его выполнить, без js. Звучит оно так — «Дан фрагмент html, для которого нужо написать стили css, допускается less или sass. Результат должен быть как на картинке. Круг, а внутри цифра 4. При клике цифра должна уменшаться на-1. Если кликнуть по кружку когда в нём находится цифра 1, то цифра сбрасывается до 4 — необходимо описать такой внешний вид и поведение, используя только стили. html-менять нельзя, применять другие языки тоже нельзя. http://prntscr.com/okb9zt ссылка на пример» html
css, который я для этого уже написал
.radius < position: absolute; padding: 20px; margin: 5px; border: 3px solid black; border-radius: 50px; >.num
Отслеживать
27.1k 3 3 золотых знака 23 23 серебряных знака 48 48 бронзовых знаков
задан 28 окт 2019 в 5:38
Kirill Bulgakov Kirill Bulgakov
157 11 11 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Хоть и не в тему, но вот подобное на z-index , без javascript :
Изначальный вариант был длиннее и неинтереснее, ищите его в истории правок, если угодно.
Новый, улучшенный вариант:
button:focus + button button:nth-child(1) button:nth-child(2) button:nth-child(3) button
Отслеживать
ответ дан 28 окт 2019 в 8:17
Stranger in the Q Stranger in the Q
56k 10 10 золотых знаков 83 83 серебряных знака 136 136 бронзовых знаков
Такое можно вытворять ради спортивного интереса, но это издевательство над CSS, в реальном коде не надо так!))
Оставил чекбоксы, чтобы было видно, что происходит. Можно было не трогать четверку лейбела, и добавить еще три before-after, но так показалось нагляднее.
.num::before < content: "4"; >.radius::before < content: "3"; >.num::after < content: "2"; >.radius::after < content: "1"; >#check1:not(:checked) + #check2:not(:checked) ~ .num < display: block;>#check1:not(:checked) + #check2:not(:checked) ~ .num::before < display: block;>#check1:not(:checked) + #check2:checked ~ .radius < display: block;>#check1:not(:checked) + #check2:checked ~ .radius::before < display: block;>#check1:checked + #check2:checked ~ .num < display: block;>#check1:checked + #check2:checked ~ .num::after < display: block;>#check1:checked + #check2:not(:checked) ~ .radius < display: block;>#check1:checked + #check2:not(:checked) ~ .radius::after < display: block;>/* Ага, можно оставить один < display: block >, а все селекторы разделить запятыми. */ label < display: none; position: relative; /* Чтобы абсолютные before и after не выходили за рамки элемента */ color: transparent; /* текст самого лейбела - прозрачный, чтобы не заморачиваться */ width: 30px; height: 30px; border: 1px solid #999; border-radius: 50%; font-size: 20px; font-family: "Helvetica"; cursor: pointer; user-select: none; >.num::before, .num::after, .radius::before, .radius::after
P.s. А возможных комбинаций n! ))) Будет 3 чекбокса — можно сделать 6 «переключений». 4 штуки = 24, 5 штук — уже 120 !)
Как изменить цвет ссылки при наведении?
Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, который добавляется к селектору A . Сперва через селектор A задаём цвет обычных ссылок, затем с помощью :hover задаём цвет ссылок при наведении (пример 1).
Пример 1. Изменение вида ссылки
В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки не будут менять свой цвет.
Рис. 1. Вид ссылки при наведении
Аналогично можно поменять и цвет фона под ссылкой при наведении на неё, добавив свойство background к селектору a:hover , как показано в примере 2.
Пример 2. Изменение цвета фона ссылки
Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.
Рис. 2. Изменение цвета фона ссылки
См. также
- :focus на мобильных устройствах
- background
- color
- currentColor
- text-fill-color
- Анимация ссылок при наведении
- Атрибут link
- Виды ссылок
- Всплывающая подсказка
- Единицы цвета в CSS
- Использование :hover
- Линейный градиент
- Наследование в CSS
- Несколько фоновых картинок
- Нормальное позиционирование
- Переходы с помощью :hover
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Состояния кнопок
- Сочетание с псевдоклассами
- Спрайты
- Типы ссылок
- Установка фона и градиента
- Фоновая картинка
Как изменить цвет кнопки?
Для изменения цвета фона и текста кнопки используем, соответственно, свойства background и color, добавляя их к селектору button , как показано в примере 1.
Пример 1. Цветные кнопки
Основные параметры кнопки применяем к селектору button , а дополнительно вводим разные классы, чтобы легко менять цвет кнопок. На рис. 1 продемонстрирован результат данного примера, в котором создаются плоские одноцветные кнопки.
Рис. 1. Цветные кнопки
См. также
- background
- color
- currentColor
- text-fill-color
- Атрибут link
- Атрибуты
- Единицы цвета в CSS
- Кнопки
- Кнопки
- Кнопки в Bootstrap 4
- Линейный градиент
- Наследование в CSS
- Несколько фоновых картинок
- Работа с типографикой
- Создание кнопок
- Спрайты
- Установка фона и градиента
- Фоновая картинка
Замена текста другим текстом под средством css
Можно как-то заменить один текст на другой текст через css?
Есть много техник заменить текст на картинку, а текст на текст не понимаю как.
Надо получить через css:
Возможно такое реализовать, когда есть доступ к перекрытию css на сайте?
Ссылка на комментарий
Поделиться на других сайтах
Больше способов поделиться.
11 ответов на этот вопрос
- Сортировать по голосам
- Сортировать по дате
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.