如何在用作 SVG 圖示的元素上添加懸停效果，該圖示也可以更改圖示本身的顏色。
這就是我現在擁有的兩個選項，使用蒙版影像或將圖示顯示為背景。
在 CSS 中使用的問題background，懸停時顯示正確，但我無法更改圖示顏色。
.icon {
display: inline-block;
background: url('https://cdn-icons-png.flaticon.com/512/151/151773.png') no-repeat center; /* imagine the file here as an SVG file */
background-size: 100px 100px !important;
height: 100px;
width: 100px;
}
.icon_interactive:hover {
cursor: pointer;
background-color: white;
border-radius: 50%;
padding: 25px;
}<div style="padding: 100px; background-color: gray; text-align: center;">
<span class="icon icon_interactive"></span>
</div>在 CSS 中使用的問題mask-image，懸停時顯示不正確，但我可以更改圖示顏色。
.icon {
-webkit-mask: url('https://cdn-icons-png.flaticon.com/512/151/151773.png');
-webkit-mask-size: cover !important;
mask-image: url('https://cdn-icons-png.flaticon.com/512/151/151773.png');
mask-size: cover !important;
display: inline-block;
background-color: black;
height: 100px;
width: 100px;
}
.icon_interactive:hover {
cursor: pointer;
background-color: white;
border-radius: 50%;
padding: 25px;
}<div style="padding: 100px; background-color: gray; text-align: center;">
<span class="icon icon_interactive"></span>
</div>我想要創建的是懸停時的互動式圖示，您可以更改圖示本身的顏色。
uj5u.com熱心網友回復：
考慮偽元素來結合這兩種技巧：
.icon {
display: inline-block;
height: 100px;
width: 100px;
border-radius: 50%;
padding: 25px;
}
.icon:before {
content: "";
display: block;
height:100%;
background: #000;
-webkit-mask: url('https://cdn-icons-png.flaticon.com/512/151/151773.png') center/100px 100px no-repeat;
}
.icon_interactive:hover {
cursor: pointer;
background-color: white;
}
.icon_interactive:hover::before {
background:red;
}
body {
background:gray;
}<span class="icon icon_interactive"></span>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/488154.html