Изменение фонового URL-адреса a: before с помощью CSS / SASS и цвета текста в фокусе. - PullRequest
Новая
       19

Изменение фонового URL-адреса a: before с помощью CSS / SASS и цвета текста в фокусе.

0 голосов
/ 28 апреля 2018

Мне нужно изменить фоновый URL-адрес значка SVG, когда он сфокусирован на ссылке.

Это HTML: 

<a class="foo" href="google.com">
    <span>Help</span>
</a>

Это SASS, который я сделал до сих пор безрезультатно: 

.foo {
    &:before {
        background: url("#{$active}") center center no-repeat;
    }

   [data-whatintent='keyboard'] &:focus {
        background-color: transparent; // Currently purple, make it transparent
         color: purple; // Currently white, make it purple
         &:before {
             background: url("#{$focus}") center center no-repeat;
         }
         span {
             background-color: purple;
             color: white;
         }
    }
}

Как сделать так, чтобы при фокусировке я поменял цвет фона span на фиолетовый, текст span белого и изменил URL фона на &: before? Что именно я делаю не так?

1 Ответ

0 голосов
/ 29 апреля 2018

Предполагая, что вы упомянули в своем комментарии (a.foo получает атрибут данных [data-whatintent="keyboard"]), вам следует немного изменить свой код scss: 

.foo {
    &:before {
        background: url("#{$active}") center center no-repeat;
    }

   &[data-whatintent='keyboard']:focus { // Modified line
       background-color: transparent;
       color: purple;
       &:before {
           background: url("#{$focus}") center center no-repeat;
       }
       span {
           background-color: purple;
           color: white;
       }
    }
}

В вашем коде [data-whatintent='keyboard'] &:focus скомпилировано в [data-whatintent='keyboard'] .foo:focus, поэтому селектор применяется к .foo:focus, содержащемуся в [data-whatintent='keyboard']. Если, как вы упомянули в своих комментариях, .foo элемент, который получает атрибут данных, предложенный мною код должен работать.

Надеюсь, это поможет.

...