0

Не работает :focus не могу понять почему,с :active и :hover все хорошо, что не так?

CSS:

.icons{
   display: block;
   width: 104px;
   height: 92px;
   margin: 20px auto 0 auto;
   text-align: center;
   border-radius: 2px;
   background-color: rgb(251, 251, 251);
   box-shadow: 0px 0px 1px 0px rgba(20, 20, 21, 0.14);
}

.icons:focus{
   border-radius: 2px;
   background-color: rgb(255, 255, 255);
   box-shadow: 0px 0px 36px 0px rgba(20, 20, 21, 0.2); 
}

HTML:

<div id="title">
    <div class="serviceIcon">
        <div class="icons">
            <img src="img\service\diagramm.png" alt="diagramm">
        </div>
        <div class="icons">
            <img src="img\service\tech.png" alt="tech">
        </div>
        <div class="icons">
            <img src="img\service\loope.png" alt="loope">
        </div>
        <div class="icons">
            <img src="img\service\diagramm.png" alt="diagramm">
        </div>
    </div>
    <div class="serviceContent">

    </div>
    <div class="serviceImage">
        <img src="img\apple-watch-mockup.png" alt="">
    </div>
</div>

1 ответ 1

12

Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор. Он и работает, в основном, на элементах формы (textarea, input и т. п.). Что бы на div или на другие элементы работал :focus, нужно указать tabindex:

div {width:200px;height:50px;background-color:grey}
div:focus {background-color: green}
<div tabindex="0"></div>

12
  • или любой валидный tabindex собственно, не обязательно 0 6 янв 2017 в 16:59
  • @УткаУчитсяУму, просто, смотрел в старых браузерах, там работает только если tablindex будет именно 0
    – Yuri
    6 янв 2017 в 17:01
  • в старых браузерах, это где? Имена, явки, пароли 6 янв 2017 в 17:03
  • 1
    @УткаУчитсяУму, explorer и safari для windows (safari для windows только древнейший есть)
    – Yuri
    6 янв 2017 в 17:04
  • 1
    В общем, запомнить как данность ;D 6 янв 2017 в 17:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.