Menu
I have menu. Each menu item has SVG image and text. SVG is embedded using <object>
<ul id="menu-content" class="menu-content collapse out">
<li id="calculator">
<a href="#">
<tr>
<td>
<object type="image/svg+xml" data="assets/calculator.svg">
</object>
</td>
<td class="menu-option">
<span class="menu-option">
Pricing & Services
</span>
</td>
</tr>
</a>
</li>
.....
</ul>
When I hover on menu item, background color of this item changes. But I also need to change SVG color. For now I know how to change SVG color when you hover exactly on it. But what to do when I hover on parent element.
757
One way to change SVG colors on hover is to use CSS. You can add CSS to your HTML file or you can use an external CSS file. To add CSS to your HTML file, you will need to use the <style> tag. The <style> tag goes in the <head> section of your HTML file.
To change the color of an SVG in React:Don't set the fill and stroke attributes on the SVG. Import the SVG as a component. Set the fill and stroke props on the component, e.g. <MyLogo fill="black" stroke="yellow" /> .
The fill property in CSS is for filling in the color of a SVG shape.
I know i'm late but google sent me here for the same problem and i didnt find the solution so here is what I used (hope it help someone):
CSS:
.roundedArea:hover > svg *,
.roundedArea:hover {
background-color: yellowgreen;
fill: #FFFFFF;
}
HTML structure:
<a class="roundedArea">
<svg>
*i removed the svg code for reading comprehension*
</svg>
</a>
Preview (when you hover the area it change the parent color with green and fill the svg with white) :
I just made a snippet, here it is : https://codepen.io/Demky/pen/XQQWyj
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
