【问题标题】:SVG color change inside a button CSS按钮CSS内的SVG颜色变化
【发布时间】:2020-05-10 14:10:25
【问题描述】:

我在更改 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>

【问题讨论】:

标签: html css svg-filters


【解决方案1】:

类似: .round:hover .svg { filter: brightness(1000%) saturate(0%) contrast(1000%); }

【讨论】:

    猜你喜欢
    • 2020-09-01
    • 1970-01-01
    • 1970-01-01
    • 2016-01-25
    • 1970-01-01
    • 2018-08-15
    • 2017-03-25
    • 2022-01-01
    • 1970-01-01
    相关资源
    最近更新 更多