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

Troubleshooting problem with CSS alignment within Bootstrap framework

Having trouble with the alignment when using bootstrap CSS. My desired layout is as follows: Place name: dropdownbox Gender (radio-button)Male (radio-button)Female Amount Max: textbox Min: textbox Any advice on how to achieve this? ...

cssbootstrap-4

Having trouble with implementing the .addclass function in a dice roller project

I'm looking to have the element with id=die load initially, and then on a button click event labeled "click me," apply the corresponding CSS class such as 'die1,' 'die2,' and so forth. function roll() { var die = Math.floor(Ma ...

javascriptjqueryhtmlcss

Tips for aligning my icon in the middle when I collapse my sidebar

Seeking assistance on centering the hamburger icon on my sidebar. Currently, when I adjust the width of the sidebar, the icon is not centered at all. Does anyone have a solution for achieving this? I attempted using justify-content: center in the main clas ...

css

Having trouble with CSS Transition functionality not functioning properly

I have set up a temporary page with a two-word message in the h1 tag. The h1 has a CSS3 infinite transition for shadow animation. The shadow is visible on all sides, but it does not transition smoothly. The shadow changes abruptly at regular intervals. I ...

htmlcss

What is the reason for the index.html file not connecting to the local .css files and .js file?

I'm currently using node.js to send an .html file that includes the following tags: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="This is my personal profile website" /> <link r ...

javascriptcssnode.js

Tips for changing the color and incorporating text into an image

Hey there! I'm interested in creating a website where users can select colors like blue, white, and black without the page reloading. Once a color is selected, users should have the option to add text on top of the color image, as well as the option t ...

cssajaxjquery-ui

Two adjacent divs positioned next to each other, where the right-hand div occupies the remaining space within its

I am facing a common issue with two side-by-side divs, which I usually solve without any problems by floating both divs left and adding a clear:both div after them. However, my requirements have made this problem more complicated to solve... What I would ...

htmlcsscss-float

Minimize the empty space at the top of the website

Looking to eliminate the extra space at the top of this particular website. After attempting to use firebug, I still can't pinpoint the source of this unwanted spacing. Your guidance would be greatly appreciated. Thank you! ...

css

Tips for allowing divs to be dragged and resized within table cells and rows

UPDATE I believe that utilizing Jquery is the most appropriate solution for resolving my issue with the demo. Your assistance in making it work would be greatly appreciated. Thank you. My goal is to develop a scheduler application. The essential functio ...

javascriptjquerycssreactjsjquery-ui

A comprehensive guide on personalizing Bootstrap 4 tooltips to suit your specific needs

I would like to customize the tooltip in Bootstrap 4 based on the screenshot provided below: https://i.stack.imgur.com/wg4Wu.jpg <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta chars ...

javascriptjquerycssbootstrap-4

Is it possible to access an external website by clicking on a link within a DIV element?

I have a basic website set up like this sample.php <html> <head></head> <body> <a id="myLink" href="http://sample.com">Click!</a> </body> </html> I displayed this website within a DIV-Container on a ...

javascriptphpjqueryhtmlcss

Create a uniform Bootstrap 5 album grid showcasing various text lengths for a visually cohesive display

Currently, I have designed a bootstrap album which can be viewed here: https://getbootstrap.com/docs/5.0/examples/album/ However, the text displayed in my album varies in length, resulting in an uneven layout like this: https://i.sstatic.net/Qwrnx.png ...

phpcssbootstrap-5

Is there a way to arrange the outcomes in a single line?

I need help displaying my results in three rows side by side in React/JavaScript using flexbox. Since I only have one CardItem, I can't just copy and paste it three times as it would show the same result in each row. Is there a way to achieve this wit ...

htmlcssreactjsreact-nativeflexbox

Troubleshooting problem with CSS overflow and absolute positioning on Android Browser

Our mobile web app was created using a combination of JQuery Mobile, PhoneGap, and ASP.net MVC. It is designed to function smoothly on both iOS and Android devices regardless of the browser being used. We have conducted tests on various devices and everyth ...

androidcsscordova

Reducing the size of CSS classes and IDs

I am searching for a way to automatically compress classes and ids in an .html file. This specific file is generated through a sequence of gulp commands. I attempted to use the Munch command line application, but it had adverse effects on the file by elimi ...

cssnode.jsgruntjsnpmgulp

Emphasize the active item in the PHP header

Hey there! I've been trying to figure out how to highlight the current page in the header of my website. I'm using the include method to call the header on all pages, but I can't seem to figure out how to highlight the current page while sti ...

phphtmlcssheaderinclude

Can we incorporate the radix-ui/colors variables into a CSS module file?

For my personal project, I am incorporating Radix components alongside radix-ui/colors. However, when attempting to import color variables into the CSS Module, I encountered an error. It seems that using the :root selector in the _app file is necessary, as ...

cssnext.jsimportbundleradix

The craft of masonry is known for its creation of intentional gaps

I've gone through all the posts related to this issue, but none of the suggested solutions seem to work for me. Here is a visual representation of my grid: If you want to see the code and play around with it, check out this jsfiddle. Below is the HT ...

javascripthtmlcssgrid-layoutmasonry

Infinite scrolling feature on Kendo UI mobile listview showcasing a single item at a time

Currently, I am utilizing the kendo ui mobile listview and encountering an issue when setting endlessScroll or loadMore to true. The problem arises as the listview only displays the first item in such instances. Upon inspecting with Chrome inspector, I ob ...

javascriptcsslistviewkendo-ui

The color of the top bar remains unchanged when hovered over

I am struggling to design my personal website, and I can't seem to get the top bar to change color on hover. If you believe you have a solution, please provide your answer. index.html appears to be functioning properly, but perhaps additional adjustm ...

htmlcss