Наведение не работает на незаполненных областях пути SVG

У меня есть домашняя страница портфолио (https://portfolio.umairstem.now.sh/), на которой есть svg иконки. Когда мышь наводится на значок, я хочу, чтобы он стал светло-голубым. Проблема в том, что когда мышь проходит по пробелам в SVG, эффекта не возникает. На изображении ниже показано, что я имею в виду, если я не совсем понятен. Я пытался добавить background или padding, но это вытесняет элементы на странице.

Мой CSS ниже:

svg {
    display: inline-block;
    width: auto;
    height: 5vw;
    min-height: 2rem;
    max-height: 4rem;
    scale: 0.5;
}

.Fill-1:hover{//Fill-1 is the SVG class name
   fill: #1793D1;
}

введите здесь описание изображения


svg html css sass
person VickTree    schedule 04.06.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете изменить fill пути при наведении курсора на содержащий элемент, которым в данном случае может быть <svg/>:

svg:hover path {
  fill: blue
}

Вот скрипка

person Yoav Kadosh    schedule 04.06.2019
comment
По сути, это тот же ответ, который я дал, за исключением того, что он влияет на все SVG на странице, даже на те, которые не являются ссылками, создавая запутанный пользовательский интерфейс. Кроме того, неэффективно использовать :hover для нессылочных элементов. - person coreyward; 04.06.2019
comment
@coreyward В своем ответе вы изменили заливку svg вместо пути. И неэффективно использовать :hover для нессылочных элементов в IE7/8 — браузере, который сегодня почти никто не использует. - person Yoav Kadosh; 04.06.2019
comment
fill каскады. - person coreyward; 04.06.2019
comment
@coreyward, ты прав, я этого не знал ... У меня сложилось впечатление, что твой ответ не сработал из-за комментария ОП - person Yoav Kadosh; 04.06.2019

arrow_upward
1
arrow_downward

Вместо того чтобы использовать псевдоселектор hover для элемента SVG, используйте его для содержащего элемента. Например:

a:hover svg {
  fill: #1793d1;
}

Примечание: вам нужно удалить другие селекторы и стили, чтобы это работало, как показано; если вы действительно хотите быть слишком конкретным в отношении селектора, вы можете это сделать, но я не рекомендую это делать. a:hover .Fill-1 является чрезмерным.

person coreyward    schedule 04.06.2019
comment
Ваш svg находится в теге <a>? - person coreyward; 04.06.2019

arrow_upward
1
arrow_downward

Вам нужно удалить class="Fill-1" из пути. Затем вы применяете стили, как уже упоминалось, к элементу svg.

body{background:black;}
svg{fill:white;}
svg:hover{fill:skyBlue;}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256" viewBox="0 0 256.000000 256.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"><path d="M135 2552c-40-14-81-45-105-80l-25-36 0-1156 0-1156 24-35c13-19 40-46 60-60l36-24 1155 0 1155 0 36 24c20 14 47 41 60 60l24 35 0 1156 0 1156-24 35c-13 19-40 46-60 60l-36 24-1140 2c-627 0-1149-2-1160-5zm550-446c58-27 78-47 100-99 53-128-35-261-182-274-94-9-175 33-214 109-24 46-25 128-2 175 47 99 187 141 298 89zm1148-521c128-27 217-95 276-214 52-103 61-188 61-592l0-359-195 0-194 0-3 368-3 367-25 44c-45 80-113 109-206 90-60-12-112-53-143-114-20-38-21-56-21-397l0-358-195 0-195 0 0 575 0 575 195 0 195 0 0-76 0-76 51 57c101 110 233 146 402 110zm-1053-590l0-575-195 0-195 0 0 575 0 575 195 0 195 0 0-575z"></path></g></svg>

person enxaneta    schedule 04.06.2019