Форумы портала PHP.SU :: Версия для печати :: Не работает псевдокласс :active в opera и ie

Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Не работает псевдокласс :active в opera и ie

Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Не работает псевдокласс :active в opera и ie

Страниц (1): [1]

1. Pavelbeginner - 20 Марта, 2013 - 16:04:15 - перейти к сообщению

Есть следующий код:

CODE (htmlphp):
скопировать код в буфер обмена

 
<a href="" class="button">
    <span>Hello</span>
</a>
 
.button
{
    display:inline-block;
    background:red;
}
 
.button>*
{
    display:block;
}
 
.button:active
{
    baclground:blue;
}
 

По нажатию на кнопку в ff, хроме и сафари кнопка меняет цвет. Однако, в осле и в opera цвет не меняется, почему-то от потомка не передается клик к родителю. Как пофиксить? Не хочется писать js для этого.

2. armancho7777777 - 20 Марта, 2013 - 16:07:55 - перейти к сообщению

Pavelbeginner пишет:

По нажатию на кнопку в ff, хроме и сафари кнопка меняет цвет

:focus

3. Pavelbeginner - 20 Марта, 2013 - 16:15:53 - перейти к сообщению

armancho7777777 пишет:

Pavelbeginner пишет:

По нажатию на кнопку в ff, хроме и сафари кнопка меняет цвет

:focus

Лучше расскажите почему не работает и как сделать, чтобы работало.

А :focus не могу использовать по двум причинам:
1) для того, чтобы псевдокласс :focus работал, нужно, чтобы то, почему кликают, имело DOM свойство tabindex равное 0 или большему знаению. Таким по-умолчанию обладают только тег a и кнопки, формы и т.д. У меня же внешний блок(в примере это тег a) может быть и дивом. Поэтому :focus уже отпадает.
2) При отжатии кнопки мыши, :focus продолжит свое действие и кнопка останется синей до того, как перезагрузится страница(если эта кнопка-ссылка).

4. LIME - 20 Марта, 2013 - 16:16:09 - перейти к сообщению

Pavelbeginner пишет:

почему-то от потомка не передается клик к родителю

передается
просто этот псевдокласс определен только для ссылок
(Добавление)

Pavelbeginner пишет:

baclground:blue;

ошибка при копипасте?
(Добавление)
background-color:
?

5. Pavelbeginner - 20 Марта, 2013 - 16:20:23 - перейти к сообщению

LIME пишет:

просто этот псевдокласс определен только для ссылок

Не правда.

Цитата:

The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

Любой элемент.

Цитата:

Note. Also note that in CSS1, the ':active' pseudo-class only applied to links.

Такое было только в css1.

6. LIME - 20 Марта, 2013 - 16:25:07 - перейти к сообщению

где ты это вычитал?
http://www[dot]w3schools[dot]com/cssref/sel_active[dot]asp
http://www[dot]w3schools[dot]com/css/css[dot][dot][dot]eudo_classes[dot]asp

7. Pavelbeginner - 20 Марта, 2013 - 16:30:22 - перейти к сообщению

LIME пишет:

где ты это вычитал?
http://www[dot]w3schools[dot]com/cssref/sel_active[dot]asp
http://www[dot]w3schools[dot]com/css/css[dot][dot][dot]eudo_classes[dot]asp

На форуме одном, кто-то со спеки привел цитаты. И :active работает во всех браузерах у любых элементов. Единственное, что не работает в описанной мною ситуацие.

8. IllusionMH - 20 Марта, 2013 - 17:37:07 - перейти к сообщению

Pavelbeginner, вы внимательно прочитали сообщение выше?

Если все-таки прочитали и все равно не нашелся ответ, то наведите мышь и зажмите кнопку в примере
http://jsfiddle[dot]net/SarBs/1/

P.S. Кстати, вы случаем порядок стилей :link, :visited, :hover, :active не попутали?

9. Pavelbeginner - 20 Марта, 2013 - 18:03:49 - перейти к сообщению

IllusionMH пишет:

Нет, не перепутал, юзается только :active. Не знаю почему, но в opera по ссылке в примере заработало. А вот в ie10 также не работает.

10. IllusionMH - 20 Марта, 2013 - 18:42:18 - перейти к сообщению

я просто оставлю это здесь
http://jsfiddle[dot]net/SarBs/10/
а дальше вы уж сами додумывайтесь чего не так в итоге ;)

11. Pavelbeginner - 21 Марта, 2013 - 10:05:54 - перейти к сообщению

IllusionMH пишет:

я просто оставлю это здесь
http://jsfiddle[dot]net/SarBs/10/
а дальше вы уж сами додумывайтесь чего не так в итоге ;)

Запятая лишняя стояла после .button:active и пример не работал. Но суть в другом. Во всех браузерах фон у родителя меняется и по нажатию на самого родителя и по нажатию на внутренний блок. Только в ie не работает. Плюс у меня на моем сайте и в opera не работает, а вот на этом сайте, где онлайн тестируешь в opera код с моего сайта работает! Может дело в doctype, у меня используется html5-ый доктайп. В общем хрень какая-то...

12. LIME - 21 Марта, 2013 - 10:10:06 - перейти к сообщению

Pavelbeginner пишет:

Запятая лишняя стояла после .button:active и пример не работал

это не мешает

13. Pavelbeginner - 21 Марта, 2013 - 10:12:58 - перейти к сообщению

LIME пишет:

это не мешает

мешало, пример не работал, пока не убрал её
(Добавление)
В opera я выяснил почему не срабатывает. У меня в стилях есть вот такое правило:

CODE (htmlphp):
скопировать код в буфер обмена

 
:focus
{
    outline:none;
}
 

И не важно какие свойства прописаны внутри селектора :focus, главное, что когда такой селектор присутствует, то в opera перестает срабатывать мой пример. Хрень какая-то.
(Добавление)
И ещё, подскажите, пожалуйста, касательно кнопок input type="submit". В opera и ie по нажатию на эту кнопку текст сдвигается вправо и вниз. За счет каких css свойств это делается? то есть мне нужно это знать, чтобы убрать этот сдвиг текста по нажатию с кнопок.

14. IllusionMH - 22 Марта, 2013 - 01:27:22 - перейти к сообщению

Это нормальное поведения для того, чтобы показать что кнопка как-то взаимодействует.
Если оч сильно мешает - используются разные отступы(в 1px) для активного или неактивного состояния.
По поводу ИЕ - можно в условных камментах вставить простейший JS