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..

    How do I display div's next to each other within a wrapper div?

    How to handle alternating rows dynamically?

    How to center my text vertically in a circular div with css

    How to fit CSS buttons into table cells?

    How to make 2 level scrolling tab in CSS like this in HTML 5

    ASP.NET: How to set the css class of a Control during DataBind?

    How to add a box shadow to a table tr element upon hover? [duplicate]

    How to using CSS to set content of column to top not center in JSF, primefaces?

    How can I use :before property to create a square before a span

    How can I position two to always be side by side

    Font Styling Issue ~ how to make font smooth/Strong in html css

    How to Make Tabs In CSS?

    :hover property overriden after jquery effect, how to get it back?

    How to make Google Preview Button display in a CSS pop-up?

    How to style input type file using css

    How to avoid the pain of CSS multi-browser compatibility?

    How to update the attribute while overriding a style defined in css?

    How to keep the Parent menu hovered while the mouse in child menu in a Dropdown Menu

    How to ONLY target Chrome DevTools window in CSS?

    How to get this code to behave differently based on what exactly is clicked?

    Is it possible to change somehow color profile in css

    How to add a CSS style sheet reference to all Web forms in a Visual C# .NET Web project

    How to target individually nested elements using CSS

    how to setup capybara-webkit to test ajax calls and get screenshots(html with css and javascript loaded)

    How to create a global settings file in react css modules

    HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove?

    How to dim an image keeping transparency untouched with CSS or JS?

    How to create an image sprite that stretches both horizontal and vertically as a single image?

    How to get custom css to load after richfaces?

    how can resize dynamically the logo of the header?