Menu
I am working on bootstrap 3 where I'm creating a side navbar and want to place an image inside the anchor tag which is inside list tag. I want to invert the color of the image on mouseover, but its not happening. No effect takes place on mouseover. It will be great if anyone could help.
Here is my code:
HTML:
<ul class="nav nav-pills nav-stacked" data-role="panelbar" style="height: 600px;">
<li>
<a>
<span class="glyphicon glyphicon-user glyph-width"></span>Group Name
<span id="edit-img" class="img-span pull-right">
<img src="images/glyphicons/Data-Edit.png">
</span>
</a>
</li>
</ul>
CSS:
#edit-img :hover {
-webkit-filter: invert(100%) !important;
}
I am not able to invert the color of Data-Edit.png on mousehover. Please help.
861
CSS allows you to invert the color of an HTML element by using the invert() CSS function that you can pass to the filter property. Because the default color of the text is black, the color is inverted into white with filter: invert(100%) syntax.
Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function. filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale() |hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
EDIT:
Check this DEMO
It's working in this case, should work in yours.
You'd have to apply it on the img tag
#edit-img:hover img{
-webkit-filter: invert(100%) !important;
}
Are you using a webkit browser? For me it works on -webkit-browsers, check the css at https://peterpaulvanham.nl/. If you want to make it work on Firefox e.g. use
-webkit-filter: invert(100%) !important; //* chrome, safari
filter: invert(100%) !important; //* e.g. firefox
You don't need "!important" per se b.t.w.
Is this an answer to your problem?
44
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
