Change SVG Color on Hover

Question

Am struggling changing the color of an svg on hover over an anchor. I change change it when I hover over the SVG but am trying to change it when hovering over a link next to it.

Here is my code:

                                <li>

                                    <a  href="#" class="sedation">
                                        <span id="sedation"  >
                                        </span>
                                        Sedation Dentistry
                                    </a>
                                </li>
                                <li>
                                    <a id="" href="#" class="specialists">
                                        <span id="specialists"  >

                                        </span>
                                        Our Specialists
                                    </a>
                                </li>
                                <li>
                                    <a id="" href="#" class="contact">
                                        <span id="contact"  >
                                        </span>
                                        Contact Us
                                    </a>
                                </li>

I am using jquery to insert the svg inside of the SPAN tags. So what I'd like to do is when I hover over an anchor, the color of the svg changes through the css.

Answer 1

Use CSS or jQuery. CSS is probably cleaner and easier.

In CSS:

a:hover > svg *{
  fill: green;
  stroke: white;
}

In jQuery:

$('a').on('mouseover', function() {
  $(this).find('svg').children().css({
    'fill': 'green',
    'stroke': 'white'
  });
});
$('a').on('mouseleave', function() {
  $(this).find('svg').children().css({
    'fill': 'black',
    'stroke': 'black'
  });
});

Using both fill and stroke because I don't know what your SVG consists of. Although if your SVG has shapes and paths you can define properties for each.

/* This is doing the same as the top CSS seclector.
 * Comment out one or the other
 */
$('a').on('mouseover', function() {
  $(this).find('svg').children().css({
    'fill': 'green',
    'stroke': 'white'
  });
});

$('a').on('mouseleave', function() {
  $(this).find('svg').children().css({
    'fill': 'black',
    'stroke': 'black'
  });
});

/* This is doing the same as the jQuery snippet.
 * Comment out one or the other
 */
a:hover > svg *{
  fill: green;
  stroke: white;
}

svg {
  width: 40px;
  height: 40px;
  margin-top: 3px;
}

a {
  position: relative;
  display: inline-block;
  padding: 4px;
  top: 2em;
  left: 10em;
  text-decoration: none;
  background-color: #cfd;
  border-radius: 0.35em;
  
}
span {
  position: relative;
  display: inline-block;
  margin-right: 3px;
  top: -12px;
  color: #233;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<a href="#">
  <?xml version="1.0"?>
<svg viewBox="0 0 120 120" version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <circle class="circle" cx="60" cy="60" r="50"/>
  <polyline points="30 50 45 90 90 45" stroke="black" stroke-width="20"
      stroke-linecap="round" fill="none" stroke-linejoin="round"/>
</svg>
  <span>Hover Me</span>
</a>

Answer 2

You haven't included any CSS, so we don't know what you've tried. However the following should work:

A:hover rect
{
    fill: green;

}

See demo fiddle here

One gotcha, that might be tripping you up, is that SVG elements in CSS are supposed to be case sensitive. So, for example A:hover RECT doesn't work in Firefox. Chrome is more forgiving though, so it will work there.