Unable to adjust SVG fill color

I'm having trouble changing the fill color of an SVG when the user hovers over it. Can someone help me figure out why my code isn't working?

svg:hover {
  fill: blue;
}
<svg width="0" height="0" class="hidden">
  <symbol viewBox="0 0 142 142" xmlns="http://www.w3.org/2000/svg" id="twitter">
    <title>twitter</title>
    <g fill="none" fill-rule="evenodd">
      <path d="M71.5 0C115.23 0 142 36.15 142 71.217c0 35.066-26.77 69.484-70.5 70.783C27.77 143.299 0 106.629 0 71S27.77 0 71.5 0z" fill="#AEB2B4"></path>
      <path d="M109 47.34a31.017 31.017 0 0 1-8.956 2.462 15.689 15.689 0 0 0 6.857-8.658A31.142 31.142 0 0 1 97 44.94 15.55 15.55 0 0 0 85.616 40c-8.61 0-15.593 7.01-15.593 15.652 0 1.227.139 2.421.406 3.567-12.958-.652-24.448-6.883-32.14-16.356a15.63 15.63 0 0 0-2.111 7.87 15.667 15.667 0 0 0 6.936 13.028 15.437 15.437 0 0 1-7.062-1.96V62c0 7.584 5.376 13.909 12.508 15.346-1.307.36-2.688.55-4.107.55-1.007 0-1.983-.097-2.934-.28 1.984 6.218 7.74 10.743 14.565 10.87a31.209 31.209 0 0 1-19.366 6.7c-1.256 0-2.5-.073-3.718-.219A43.983 43.983 0 0 0 56.9 102c28.68 0 44.364-23.85 44.364-44.535 0-.678-.015-1.354-.046-2.024A31.687 31.687 0 0 0 109 47.34z"
        fill="#FFF" fill-rule="nonzero"></path>
    </g>
  </symbol>
</svg>

<svg class="icon">
  <use xlink:href="#twitter"></use>
</svg>

csssvg

Answer №1

svg:hover {
  fill: blue;
}

svg {
  fill: #AEB2B4;
}
<svg width="0" height="0" class="hidden">
  <symbol viewBox="0 0 142 142" xmlns="http://www.w3.org/2000/svg" id="twitter">
    <title>twitter</title>
    <g>
      <path d="M71.5 0C115.23 0 142 36.15 142 71.217c0 35.066-26.77 69.484-70.5 70.783C27.77 143.299 0 106.629 0 71S27.77 0 71.5 0z""></path>
      <path d="M109 47.34a31.017 31.017 0 0 1-8.956 2.462 15.689 15.689 0 0 0 6.857-8.658A31.142 31.142 0 0 1 97 44.94 15.55 15.55 0 0 0 85.616 40c-8.61 0-15.593 7.01-15.593 15.652 0 1.227.139 2.421.406 3.567-12.958-.652-24.448-6.883-32.14-16.356a15.63 15.63 0 0 0-2.111 7.87 15.667 15.667 0 0 0 6.936 13.028 15.437 15.437 0 0 1-7.062-1.96V62c0 7.584 5.376 13.909 12.508 15.346-1.307.36-2.688.55-4.107.55-1.007 0-1.983-.097-2.934-.28 1.984 6.218 7.74 10.743 14.565 10.87a31.209 31.209 0 0 1-19.366 6.7c-1.256 0-2.5-.073-3.718-.219A43.983 43.983 0 0 0 56.9 102c28.68 0 44.364-23.85 44.364-44.535 0-.678-.015-1.354-.046-2.024A31.687 31.687 0 0 0 109 47.34z"
        fill="#FFF" fill-rule="nonzero"></path>
    </g>
  </symbol>
</svg>

<svg class="icon">
  <use xlink:href="#twitter"></use>
</svg>

Answer №2

The Importance of CSS Priority

If you set a fill attribute on a <path> element and also on the svg:hover selector in your SVG code, keep in mind that the inline style defined on the path element will take precedence over the one specified on the svg itself.

Answer №3

To effectively highlight the svg element, you should consider matching it with the following CSS:

path:hover {
    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

Adjusting the text color based on the dynamically set background color

If I have a calendar where each entry has a unique background color assigned to it (one color per user), including both light and dark colors that users can choose from, how can I set the text color to match the background style? Where should I begin wit ...

phpjqueryhtmlcss

Creating a unique custom icon by leveraging the material UI icons - a step-by-step guide

I am looking to create an arrow graphic similar to the one shown in the image below https://i.stack.imgur.com/k9TvH.png Originally, I was able to achieve this using SVG - <svg height='24' width='12' style={{ marginBottom: '-4p ...

csssvgmaterial-ui

Is it permissible to utilize the ::Before::Before element?

While working on a CSS file for a page with a non-editable profile, I encountered the challenge of not being able to add content directly. This limitation prompted me to explore alternative solutions. My idea was to utilize the page ID and incorporate it ...

css

Several iFrames embedded on the website automatically adjust to the same pre-set height

Apologies if this question has already been addressed, but I am struggling to properly articulate it. Here's the issue: I have a client's holiday accommodation website that uses three embedded iFrames for a Calendar, Booking Enquiry, and floorpla ...

javascriptjqueryhtmlcssiframe

What is the best way to ensure the header spans the entire width of a webpage using the display: flex; property and flex-direction: column styling within the body element

Click here for the CSS code snippet Hello everyone, this is my very first query on Stack Overflow. I know it might be a simple question but it's my first time posting here so kindly bear with me. Below is the CSS code snippet provided: *{ ...

htmlcssflexbox

Enhancing the appearance of the CSS panel with Font Awesome icons

I need help adding a fontawesome or any other icon to my CSS3 based sliding panel button. The icon should change from open to close when clicked on. Any ideas on how to achieve this would be greatly appreciated! * { margin:0; padding:0; font-famil ...

css

Tips for directing attention to a specific row with an input field in JavaScript

I duplicated a table and added an input field for users to search or focus on a specific row. However, there are two issues: When a user enters a row number, the table displays the wrong row - for example, if the user enters 15, the table shows row number ...

javascripthtmlcss

Stacking issue - elements not properly aligned

Is there a way to move my H1 text below the blue category button instead of beside it? Thank you in advance! http://jsfiddle.net/TDBzN/ <div id="article" class="animated2 fadeInLeftBig"> <div class="article-close"></div> <div c ...

htmlcss

Arranging elements within a complex div structure

I have been working on styling this div that displays the products for an e-commerce website. I initially used CSS and a table within it, but it seems like using tables for content is not recommended, so I am trying to find a better solution. However, my a ...

css

Accordion styling using CSS

My current issue lies with setting the style for the contents of an accordion. The problem arises when the styles defined in a CSS file do not take effect on the content of my accordion when using the following code along with a separate CSS file: <scr ...

jqueryhtmlcss

How can you use HTML, CSS, and JavaScript to group objects with one color and then change the color of one specific object?

I have a set of 6 labels that act as buttons. When one is clicked, it changes from white to blue. If another label is clicked, the previously blue label turns white and the newly clicked one turns blue. Currently, the code below sets all labels to white b ...

javascripthtmlcss

Tips for customizing styles when an element is being dragged over in Material-UI?

If I want to alter the backgroundColor when hovering, I can utilize sx={{"&:hover":{backgroundColor:"yellow"}} Is there a way to adjust the backgroundColor on dragover? It appears that sx={{"&:dragOver":{backgroundCol ...

cssmaterial-uidom-events

Setting the default value for ngModel does not receive any information from the model

I am trying to populate a form with default values using the code below: <h3>ِStart Time</h3> <div class="row" > <div class="col"> <label for="startTime">Hour(s) </label> <input type="numb ...

htmlcssangulartypescript

Ways to prevent a <a href> element with a class linked to javascript from behaving like a block element

I am currently facing an issue with formatting an inline navigation. The last link, which is associated with a JavaScript class, is causing the entire link to become a block element instead of aligning inline with the rest of the links in the navigation. ...

javascripthtmlcss

Utilize jQuery to dynamically update the box-shadow property with inset added

I have a situation similar to this: $('.inset').click(function(){ if($('.inset').is(':checked')){ $('.box-shadow').css('boxShadow','inset'); }else{ $('.box-shadow&ap ...

jqueryhtmlcss

Emphasize a checkbox by selecting it when another checkbox is checked

I have a question about checkboxes and highlighting the checkmarks. The issue I am facing is that I have multiple checkboxes with the same ID for different screen resolutions. When I click on the label for "Check 1" it highlights the corresponding checkmar ...

javascripthtmlcss

Ways to position an element at the center using Flexbox技

Having some difficulty centering an element in my code using flexbox. It seems to work for everything else, but not here. Any suggestions or ideas? .answer { text-shadow: 0 0 2px gr; display: flex; justify-content: center; border-radius: 5px; ...

htmlcssflexbox

Solutions for altering the appearance of a combobox using CSS

Currently, I am experimenting with javafx 2 and trying to modify the background color of the menu/list through CSS. Despite attempting the code snippet below, nothing seems to be working as expected. Do you have any suggestions or insights on how to achi ...

csscomboboxjavafx-2

Utilizing jQuery's POST Method to Fetch JSON Data on a Website

I've developed a Java REST API and now I want to retrieve JSON data on my website (which is built using HTML & CSS) by utilizing jQuery. The method to be used is POST, and here is the structure of my JSON: { "sessionID" : "25574", "interactiv ...

jqueryhtmlcssjsonrest

Issues are occurring with the @font-face css for the Futura Bk BT Bok.ttf font file

Is there a way to incorporate the 'Futura Bk BT Bok.ttf' font into my website using the CSS @font-face rule? Here is a snippet of my current CSS: @font-face { font-family: abcd; src:url('Futura Bk BT Bok.ttf') format('true ...

cssfontsfont-face