Unable to modify SVG color to a white hue

I am currently working on an Angular project where I am utilizing SVG to display some icons. These icons originally have a default grey color, but I want them to change to white when hovered over. Interestingly, while changing the color to red, green, or yellow works perfectly fine, attempting to change it to white does not seem to work.

Below is my HTML code snippet:

<div class="user-name">
    <svg *ngIf="hasCopyToClipboard" width="10" height="12" viewBox="0 0 10 12"
         fill="none" xmlns="http://www.w3.org/2000/svg">
        <path opacity="0.5"
              d="M6.49997 0.500031H0.999995C0.449998 0.500031 0 0.950028 0 1.50003V7.99999C0 8.27499 0.224999 8.49999 0.499997 8.49999C0.774996 8.49999 0.999995 8.27499 0.999995 7.99999V2.00002C0.999995 1.72502 1.22499 1.50003 1.49999 1.50003H6.49997C6.77497 1.50003 6.99996 1.27503 6.99996 1.00003C6.99996 0.725029 6.77497 0.500031 6.49997 0.500031ZM6.79497 2.79502L9.20995 5.21001C9.39495 5.39501 9.49995 5.65 9.49995 5.915V10.5C9.49995 11.05 9.04995 11.5...

And here is how my SCSS looks like:

.user-name {
  width: 100%;
  font-weight: 500;
  font-size: 12px;
  padding-left: 3px;

  svg {
    float: right;
    margin: 2px 0 2px 10px;
    cursor: pointer;

    :hover {
      fill: white;
    }
  }

}
htmlcsssvgsass

Answer №1

The fill color is currently applied directly on the :hover state of the svg element, but it should be targeted towards the path element instead. This adjustment is necessary because the SVG path already contains a fill="blue" attribute.

svg:hover path { }

To further illustrate this issue, refer to the provided example below:

svg {
  margin: 2px 0 2px 10px;
  cursor: pointer;
}

svg:hover path {
  fill: red;
}
<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path opacity="0.5"
          d="M6.49997 0.500031H0.999995C0.449998 0.500031 0 0.950028 0 1.50003V7.99999C0 8.27499 0.224999 8.49999 0.499997 8.49999C0.774996 8.49999 0.999995 8.27499 0.999995 7.99999V2.00002C0.999995 1.72502 1.22499 1.50003 1.49999 1.50003H6.49997C6.77497 1.50003 6.99996 1.27503 6.99996 1.00003C6.99996 0.725029 6.77497 0.500031 6.49997 0.500031ZM6.79497 2.79502L9.20995 5.21001C9.39495 5.39501 9.49995 5.65 9.49995 5.915V10.5C9.49995 11.05 9.04995 11.5 8.49996 11.5H2.99498C2.44499 11.5 1.99999 11.05 1.99999 10.5L2.00499 3.50002C2.00499 2.95002 2.44999 2.50002 2.99998 2.50002H6.08497C6.34997 2.50002 6.60497 2.60502 6.79497 2.79502ZM6.49997 6H8.74996L5.99997 3.25002V5.50001C5.99997 5.775 6.22497 6 6.49997 6Z"
          fill="blue"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guidelines for transmitting form information to a web API using Angular

I am currently working on an Angular 6 project where I have a form and a table that retrieves data from a web API. I want to know if it's possible to send the form data to that web API. Here is the code snippet that I have so far: HTML Form: &l ...

angularhtmltypescript

Encountering an issue while attempting to send an image through JavaScript, jQuery, and PHP

I'm currently attempting to upload an image using JavaScript/jQuery, but I am unsure of how to retrieve the image in order to send it to a server (PHP). I have a form containing all the necessary information that I want to save in MySQL, and I use jQu ...

javascriptphpjqueryhtmldom

How can you extract the text associated with the chosen value in a dropdown list implemented in JavaScript?

Hello, I've been having difficulty extracting the value from a dropdown list created using the FacetWP plugin. Despite extensive research and numerous attempts using various methods to retrieve the text value from the list, I have not been successful. ...

javascriptjqueryhtmlajaxdropdown

Ensure that the jQuery ajax function triggers only after the images or iframes have completely loaded

I am currently in the process of creating an online portfolio. My goal is to have project information load into the current page via ajax when a user clicks on a specific project. However, I am facing an issue with the timing of the load() success function ...

javascriptjqueryhtmlajaxvimeo-api

Difficulty with selecting the nth-child element within an Ember application

In my current project using Ember, I am faced with the challenge of targeting nth-child elements with CSS due to the presence of Ember script tags. Is there a consistent method to achieve this in an Ember application? Instead of the conventional approach: ...

cssember.jscss-selectors

How do I stop a line break from being added when closing a div tag?

Can you help me understand why the HTML code below is causing a line break after the div closing tag? And do you have any suggestions on how to prevent this line break so that it resembles a simple table layout? <p> <div style="width:200px&q ...

htmlcss

The connection of <p:ajax> to a parent component that is not a ClientBehaviorHolder is not possible

Trying to trigger a function when selecting a value from a dropdown. See the code below: <h:form id="frmUpload" enctype="multipart/form-data"> <p:column><h:outputText value="Select Team: " /></p:column> <p:colu ...

javahtmlajaxprimefacesdrop-down-menu

How can the top height of a jquery dialog be reduced?

Just starting out with jquery, I've got a dialog box and I'm looking to decrease the height of this red image: Is there a way to do it? I've already made changes in the jquery-ui.css code, like so: .ui-dialog { position: fixed; to ...

javascriptjqueryhtmlcss

Guide to setting a default value for a select option in Angular 2+

I am having trouble setting a default option in my select box using the html selected property. I want the selected option to be assigned to StartingYear, but currently it's not working as expected. <select [(ngModel)]="StartingYear"> < ...

angularhtml

Create animations for SVG paths and polygons that move along specified paths

I am trying to animate both a path and a polygon in an SVG arrow along the same path. Currently, I have successfully animated the path using CSS, but I am struggling to figure out how to move the polygon along the path at the same pace. <svg id="La ...

cssanimationsvg

In order to verify the dynamic components within the table

I need assistance with validating dynamically created textareas. In the code below, I am able to validate only the first row but struggling to do so for the second row. How can I get all the row values validated? Thank you in advance. To generate dynamic ...

javascriptjqueryhtmlvalidation

Achieve full height for the span tag within a div using CSS styling

I am facing a particular scenario: In a bootstrap row with 2 columns: - the first column contains a table with a button to add new rows - the second column has a label and a span (although it doesn't have to be a span) Both columns have equal hei ...

htmlcsstwitter-bootstrap

Styling CSS Based on Input from Child Siblings

Is it possible to customize an adjacent element based on a valid input from a child element? Let's say we have the following HTML structure: <div id="source"> <input type="text"> </div> <div id="target"> </div> Below ...

htmlcsssassless

The datepicker in Jquery is hidden beneath a div

I've been using this datepicker in my code for a while now. Recently, I made some changes to the HTML and added AJAX calls. However, when I click on the input field, the datepicker doesn't show up. It seems like it's been added to the DOM co ...

jquerycssdatepicker

Using Bootstrap to Position DIVs at the Top, Middle, and Bottom

I'm looking to create a layout with three DIVs inside a container DIV, all centered horizontally. The first DIV should be aligned at the top of the container, the second in the vertical center, and the third at the bottom. While I found some helpful t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Tips for postponing an action until the webpage is fully loaded

Currently, I am using Selenium in R to perform a specific task. The script I have written enables the program to search for pizza restaurants near a designated geographical coordinate on Google Maps. The script continues to scroll until all restaurant inf ...

pythonhtmlrxmlselenium-webdriver

Initiate a CSS animation only when a different animation has completed

I am trying to create a sequence of animations using 2 squares. I want the animation for the red square to start only after the blue square's animation is complete. How can I achieve this cycle of animations? .box { width: 100px; height: 1 ...

javascriptjqueryhtmlcss

HTML form variable for running operations

I have created an HTML form that accepts any Linux command as user input. The goal is to execute the command on the server and display the output back to the user. However, I am encountering an issue where I cannot pass the entered command from the textbox ...

htmlforms

I would like a div element to slide up from the bottom of the page

Could someone please assist me in creating a popup div that appears from bottom to top when a specific button is clicked? I would like the div to be fixed without affecting the overall page content. Any help would be greatly appreciated. Thank you! $( ...

javascripthtmljquerycsspopup

What is the best way to arrange div elements in this particular manner using CSS?

Wanting to create a specific layout for my website by positioning some divs in a unique way and adding content to them, I have been focusing on responsive design. I am wondering if it is possible to position these divs while ensuring responsiveness. The de ...

htmlcss