Якорная наведение со встроенным SVG и текстом - PullRequest
Новая
       23

Якорная наведение со встроенным SVG и текстом

0 голосов
/ 15 ноября 2018

Не знаю, как этого добиться, но у меня есть встроенный SVG с какой-то текстовой оболочкой в ​​теге привязки.Но SVG не меняет цвет при наведении курсора на якорь в целом, только на текст.Как только вы наведите курсор мыши на SVG, он изменит цвет, но мне интересно, как можно вызвать состояние зависания в целом.

CSS: 

    a, a svg {
    color: #fff;
    }

    a:hover {
      color: #111;
    }

    a svg:hover { 
      fill: #111;
    }

HTML: 

<a href="https://facebook.com/username" target="_blank">FACEBOOK 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
   <path d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
    c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
  </svg>
</a>

Я мог бы поклясться, что у меня это работало где-то еще, прежде чем не уверен, почему это не сработает здесь.

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Дайте пути атрибут fill="currentColor", и он унаследует цвет заливки от своих родителей. 

a {
    color: #fff;
}

a:hover {
  color: #111;
}
<a href="https://facebook.com/username" target="_blank">FACEBOOK 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
   <path fill="currentColor" d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
    c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
  </svg>
</a>
0 голосов
/ 15 ноября 2018

Цвет заливки вашего svg отображается по умолчанию #111, поэтому вам нужно изменить цвет заливки нормального состояния svg в вашем CSS.Я не знаю, хотел ли ты, чтобы текст был белым, но ты можешь изменить его, если нужно. 

a, a svg {
	color: #fff;
	fill: #FF0000;
}

a:hover {
	color: #111;
}

a:hover svg {
	fill: #111;
}
<a href="https://facebook.com/username" target="_blank">FACEBOOK 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
   <path d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
    c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
  </svg>
</a>
...