Будет ли CSS active работать с элементом без ссылки

ProgramBox

Будет ли CSS active работать с элементом без ссылки

Post author:admin
Запись опубликована:29 августа, 2022
Post category:Вопросы по программированию

#css

Вопрос:

Я хочу, чтобы элементы, у которых есть класс тега, были выделены серым цветом (с закругленной границей) при наведении курсора мыши и при щелчке по элементу (элементам).

Пример элемента может выглядеть следующим образом <span class="tag">Some value</span>

Я надеялся, что это даст желаемый результат (tag: hover работает, как и ожидалось, но tag: active — нет):

 .tag{
    }

.tag:hover{
    background:#CCC;
    padding:4px;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px;
    border-radius: 4px;     
}

.tag:active{
    background:#CCC;
    padding:4px;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px;
    border-radius: 4px;         
    }

Ответ №1:

Вы можете использовать jQuery для постоянного добавления класса в свой span . Вы могли бы сделать это так:

 .tag:hover, .tag.everclicked{
background:#CCC;
padding:4px;
-webkit-border-radius: 4px; 
-moz-border-radius: 4px;
border-radius: 4px;         
}

И в jQuery:

 $(document).ready(function()
{
    $('.tag').click(function()
    {
        $(this).addClass('everclicked');
    });
});

http://jsfiddle.net/r4gQQ/2/

1. Спасибо, я должен был быть более ясным. Я знаю, как это сделать с помощью jQuery. Из того, что я прочитал, CSS звучал как более чистый способ достижения того же самого. Будет делать то, что вы предложили.

2. @Ankur: вы можете сделать это с помощью чистого CSS, но, к сожалению, не в IE 8 и ниже — jsfiddle.net/r4gQQ/3 .

3. Да, я считаю, что первое решение с CSS всегда будет лучше, но это поведение определяется как то, что вы хотите. CSS не может решить за вас, хотите ли вы этот стиль: если вы когда-либо нажимали, или если вы переключаете щелчок, или любое другое поведение, которое вы могли бы придумать. CSS рассматривает только локальное поведение, такое как наведение курсора и фокусировка, но не глобальный выбор и определенно не зависит от времени. Все эти события наведения можно «отменить», сняв выделение или сняв наведение.

4. @AndyE Хороший пример использования :checked элемента, но теперь вы также можете отменить его выбор снова. Так что, возможно, это не полное поведение, которое требуется OP. Хотя, возможно, это так. =)

5. Этот метод скрытого флажка — эпическая победа. Моя первая мысль заключается в том, что вы можете использовать его, чтобы упростить полный стиль флажка, не прибегая к JS, скрывая его и заставляя его состояние влиять на какой-либо другой связанный элемент. Должен помнить об этом.

Ответ №2:

У вас одинаковые стили CSS, определенные для обоих псевдоклассов. :active Элемент обычно :hover тоже будет иметь (в зависимости от браузера), поскольку он применяется, когда кнопка мыши нажата на элементе.

Если вы хотите, чтобы стили оставались примененными, когда вы щелкнули и отошли от элемента, вам нужно будет использовать JavaScript или, альтернативно, присвоить элементу tabindex атрибут и использовать :focus псевдокласс. Например, используя тестовый пример @Marnix, http://jsfiddle.net/r4gQQ/1 /.

1. Я надеялся, что он будет применять класс постоянно после нажатия на него, а не только во время нажатия — вот где я ошибаюсь.

2. Ах, так это было ваше намерение… Не понял этого из вашего вопроса. Возможно, вам следует использовать jQuery для добавления дополнительного класса по щелчку.

3. «Активное» состояние сохраняется только на время щелчка пользователя. Если вы хотите, чтобы стиль сохранялся дольше, чем это, то вам, вероятно, следует прикрепить класс к щелкаемому элементу с помощью javascript и создать его вместо этого.

Ответ №3:

Перво-наперво, CSS для ваших состояний:hover и:active идентичен, поэтому вы не увидите никаких изменений!

Согласно спецификациям для CSS на w3.org , :active раньше применялся только к гиперссылкам в CSS1, но это уже не так. Я не смог найти никакого явного утверждения относительно того, для каких элементов он работает сейчас, поэтому я просто предполагаю, что он работает везде, если кто-то другой не знает лучше. Возможно, он по-прежнему применяется только к элементам, которые пользователь должен «активировать», нажимая, например, ссылки и кнопки формы.

Если :active действительно применяется к элементам любого типа, тогда приведенный выше CSS должен работать так, как вы хотите, при условии, что вы измените стиль :active, чтобы он отличался от стиля:hover, конечно!

Если этого не произойдет, то либо в CSS все еще существуют ограничения относительно того, где вы можете использовать hover, либо в движке CSS вашего браузера есть ошибка, которая ограничивает, где вы можете применять стиль :active способом, который противоречит текущим спецификациям CSS. Если это так, то вы можете использовать javascript, чтобы добавить класс при наведении курсора мыши к выбранному элементу и снова удалить его при наведении курсора мыши или наведении курсора мыши. Затем вы можете оформить активный класс в CSS как обычно.

Метки: Будет ли CSS active работать с элементом без ссылки