CSS 如何通過鏈接更改 hover 上的 SVG

Question

我有以下內容：

如您所見，當用戶將鼠標懸停在其上時，有一些 css 需要更改圖像。

 .dashboard-card-content:hover.right-arrow a { background-color: #29b1e9; }.dashboard-card-content:hover.right-arrow a svg path { stroke: #fff; }

 <div class="white-container dashboard-card-content"> <div class="gLoader-img"> <img src="assets/images/comp-switch-logo2.png" alt=""> </div> <div class="gloaderSvg-wrapper"></div> <div class="dashboard-card-header-content"> <h5>Policy Maintainance</h5> </div> <div class="dashboard-card-footer-content"> <div class="right-arrow"> <a href="#"> <img src="assets/images/right-icon.svg" class="svg" alt=""> </a> </div> </div> </div>

正常 state 隨心所欲。

hover state 上的不符合要求。 它根據需要使按鈕背景為淺藍色，但不會使箭頭變為白色。

這是 hover 所需的外觀。

問題

如何更改上述 htlm/scss 以允許用戶將鼠標懸停在圖像上時變為白色？

Answer 1

我認為沒有辦法用color做到這一點，你可以使用下面這樣的方法

 .icon { display: inline-block; width: 70px; height: 70px; background-size: cover; }.icon-arrow { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-arrow-black.svg); }.icon-arrow:hover, .icon-arrow:focus { filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%); } body { display: grid; height: 100vh; margin: 0; place-items: center center; }

 <div> <span class="icon icon-arrow"></span> </div>

Answer 2

您應該嘗試使用fill css 屬性。 這將適用於您的箭頭，因為我認為它們是形狀。 這是與背景顏色對應的 SVG。 您可能需要使用 SVG 中的類或標識符來僅定位箭頭...

如果這不起作用，最好向我們展示 SVG，以便我們提供更多幫助。

Answer 3

使用 object 標簽代替 img 標簽。 這是一個例子。

 .svg { display: inline-block; width: 70px; height: 70px; background-size: cover; }.svg:hover { filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%); }

 <object type="image/svg+xml" data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" class="svg"> Bike </object>