SVG изменение цвета внутри кнопки CSS - PullRequest
Новая
       20

SVG изменение цвета внутри кнопки CSS

0 голосов
/ 24 января 2020

У меня проблемы с изменением цвета SVG вместе с кнопкой. Я хочу, чтобы цвет SVG менялся, когда я наводил курсор на кнопку с SVG, теперь он работает только тогда, когда я наводю курсор мыши на изображение SVG внутри этой кнопки. Вот что я получил до сих пор: 

.round {
    display: inline-block;
    width: 120px;
    line-height:118px;
    background-color: rgba(100, 100, 100, 0);
    border:2px solid #0090ff;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
    cursor:pointer;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
}

.round:hover {
    background-color: #00aaee;
    border:2px solid #0080b3;
}

.svg:hover {
    filter: brightness(1000%) saturate(0%) contrast(1000%);
}
<a href="/category/aktualnosci/" class="round"><img class="svg" src="/wp-content/uploads/2019/12/gazeta.svg" width="60" height="60"></a><br>

1 Ответ

0 голосов
/ 24 января 2020

Что-то вроде: .round:hover .svg { filter: brightness(1000%) saturate(0%) contrast(1000%); }

...