How to cancel/disable hover and active effects coming from another CSS library?

Tags: css,twitter-bootstrap

Problem :

I am using Social Buttons for Bootstrap to add social buttons on my web site. The file is basically a CSS, which is using Font Awesome and has around 20+ classes defined for various social networks. Buttons, defined with Bootstrap Social have hover and active effects.

What I want to do is disable hover/active effect, so the buttons would become static, i.e. without any hover/click functionality.

Ideally, I'd like to have some CSS class, say "btn-static", which would cancel style changes coming from hover/active effects.

Is this even possible?

I would like to avoid creating separate CSS class for every social network, or modifying original CSS file. Hoping to add custom class which could cancel hover/active events.

For example, here is the button defined:

<span class="btn btn-social btn-facebook">
    <span class="fa fa-facebook"></span>Facebook

I have tried using:

.btn-static:active, .btn-static:hover { background-color: none; }


.btn-static:active, .btn-static:hover { background-color: inherit; }

But that just makes the button have transparent background. I want it to keep original color. Is it somehow possible to reference the original color in CSS?

UPDATE #1: JSFiddler is available

Solution :

This is a hack:

.btn-static {
  pointer-events: none;

According to Can I Use, it is well supported. Take a look at the known issues tab on that page, as this won't scale to many other uses.

    CSS Howto..

    Joomla 3 How to Style PHP Date Format

    jQuery - how do I show the full navbar at certain width?

    JQuery Animate() showing sticky behaviour with other elements in the same class

    How to center li tags list

    How to apply color to all element between the first and the last without giving a number to nth-child()?

    How can I force a cached css file to be reloaded on a JSP (i.e. not PHP)?

    How to fit an image according to screen size

    What is the best CSS trick to reduce how much HTML you need?

    How to reduce font weight in Firefox on Mac with CSS?

    How do I continue to allow the user to click until a certain point?

    How to apply a complex style to the selection of a Select2 component?

    How to scale a .svg being the background in a div?

    How to not make text colored within a href link but the text is also within div?

    How to add CSS if element has more than one child?

    How do I make my HTML5 nav li tab stay active on click with CSS3?

    How can I make an element fit to fill the right part of the window?

    How to put text and image in a same line?

    How to get use the functionality same as “-webkit-appearance” in firefox?

    show hover by default using CSS

    How to set inline css width using model values in c#, mvc

    How do you switch the cursor to a pointer cursor when hovering over the bars in a Kendo UI bar chart

    How to change the icon of a JStree node using only css?

    How to dynamically resize HTML element according to it's sibling size using CSS only?

    How do I do the css for this?

    How can I get a button on the side of a text box to be perfectly aligned all the time?

    How to make image override parent width and stretch to browser width?

    How can I get a jquery css container to pop up letting the user know data was successfully entered?

    jQuery select box Show/hide div

    How to prevent a div from disappearing when you hover a link in pure css

    How to use EMs in CSS Media Queries aligned with JavaScript events?