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

What is the reason behind both paragraphs being displayed in a shade of blue in this snippet of code

.red p { color: red; } .blue p { color: blue; } <div class="blue"> <p> first </p> <div class="red"> <p> second </p> </div> </div> Initially, I expected the first paragraph to be bl ...

htmlcss

Struggling to send form data to the database

I've been working on sending form data to a database but for some reason, the data doesn't seem to be showing up when I check the database. Can anyone help me figure out what I'm doing wrong? I followed a tutorial on YouTube pretty closely, ...

phphtmlmysql

Excerpts capturing the significance of HTML attribute values

$(document).ready(function () { for (var n = 0; n < 3 ; n++) { $("body").append("<p id=\"element"+n+"\">Greetings, I am Element " + n + ".<p>"); } }); In the third line of code, which pairs of quotation marks match ...

jqueryhtmlregex

I'm not sure how to use the global .container CSS style in Next.js for multiple pages

I'm currently diving into the world of React and Next.js, tackling a project with Next.js. I've set up a global CSS file with a .container style definition which I imported in my _app.js file. However, I'm unsure how to apply this global sty ...

cssreactjsnext.jsglobal

Guide to creating dynamic borders around your PHPexcel output

Looking for assistance on adding borders around output arrays in an Excel report using PHPexcel. I reviewed the documentation, but the examples are static, requiring a predefined number to set. My goal is to have all arrays transferred to Excel with bord ...

javascriptphpjqueryhtmlphpexcel

Utilizing property validation in your codebase

How can I set up my code to display a warning in the console if the value of the Prop is not a string? The player-name prop should always be a string. If this: <greet :player-name="5"></greet> contains a number, I want my code below to generat ...

javascripthtmlvalidationvue.js

Disabling directional focus navigation in CSS: A comprehensive guide

Is there a way to disable directional focus navigation properties, such as 'nav-up', 'nav-right', 'nav-down', 'nav-left', for elements on an HTML page? button { position:absolute } button#b1 { top:0; left:50%; ...

htmlcss

React - CSS Transition resembling a flip of a book page

As I delve into more advanced topics in my journey of learning React and Front Web Dev, I discovered the ReactCSSTransitionGroup but learned that it is no longer maintained so we now use CSSTransitionGroup. I decided to create a small side project to expe ...

javascriptreactjscsscss-transitionsreactcsstransitiongroup

Solving the CSS Trick: Responsive Data Table (featuring inline editing) Display Glitch

In my quest to create a responsive table with inline editing, I turned to Chris's guide at CSS-Tricks (check it out here). To see how it all comes together, take a look at this Plunker demo. On mobile screens, the responsiveness is on point. https: ...

htmlcssangularjsdatatableresponsive-design

Encountering a Django Channels issue while loading the JavaScript wrapper

After successfully running the server, the following appeared in my cmd prompt: System check identified no issues (0 silenced). January 21, 2020 - 17:43:42 Django version 3.0.2, using settings 'crm.settings' Starting ASGI/Channels version 2.4.0 ...

javascripthtmldjangodjango-channels

Tips for setting up personalized breakpoints for a Bootstrap navbar

I am currently facing an issue with my navbar on tablet view. Despite implementing custom breakpoints to collapse the navbar at 1050, the menu bar is appearing in two rows instead of one. I have tried using the code below but it doesn't seem to be wor ...

csstwitter-bootstrap

Embedded video player is failing to display and play the video file

Currently, I am in the process of developing a PHP backend for my mobile application. One specific requirement involves displaying and playing a video file that is hosted. This is the approach I have taken: $data[$i]['video'] = '<vide ...

phphtml

What is the best way to display the output after retrieving an array?

Database : --> product table P_id P_name P_uploadKey 1 Cemera 7365 2 Notebook 7222 3 Monitor 7355 4 Printer 7242 --> buy table B_id P_id B_nam ...

phphtmlsql

Update the color of the angular material input text box to stand out

Hey there, I'm currently using Angular Material and I want to change the color of the input focus when clicked. At the moment, it's displaying in purple by default, but I'd like it to be white instead. https://i.stack.imgur.com/vXTEv.png ...

htmlcssangularangular-materialmaterial-ui

AInspector WCAG evaluation found that mat-select does not meet level A compliance standards

As I work on making my website WCAG level A compliant, I've encountered an issue with the mat-select component in Angular material. After running checks with the AInspector extension for Firefox, it appears that the mat-select component lacks aria-con ...

htmlangularangular-materialaccessibilitywcag

Verify whether the labels are blank, remain as they are, or transfer the data to the database

Currently, I am utilizing PHP, HTML5, and JavaScript for my project. The task at hand involves creating a webpage that will be connected to a database. However, I have encountered an issue wherein the page proceeds to the next step and sends data even when ...

javascriptphphtml

ng-view is the culprit behind the website's fatal error

Encountering a "RangeError: Maximum call stack size exceeded" in the console while trying to recreate a basic routing example from w3schools. The crash seems to be linked to <div ng-view></div> in index.html. Despite making minimal changes from ...

javascripthtmlangularjsangular-routing

Arranging div blocks in columns that are seamlessly aligned

I am dealing with a situation where I have several boxes or blocks arranged in a 3-column layout. These boxes are styled using properties like float: left, width: 33%, but they have varying heights. Is there a way to make sure that the boxes always fill i ...

jqueryhtmlcssgrid-layout

Showing JSON data stored in Local Storage

My goal is to retrieve a JSON object from local storage in the web browser and then display the values. While I am able to save the JSON object and add new data to it, I am struggling with the logic required to fetch and show it. For context, the variable ...

jqueryjsonhtmllocal-storagelocal

Is the GET method failing to record your request?

On one of my pages, I have the following code: <form method="get" action="client_specific_task.php"> <input type="hidden" value="x" /> <input type="submit" value="Add Client-Specific Task"> </form> The client_specific_task.php fil ...

phphtmlformsget