Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><em><strong><a href="http://jsfiddle.net/M2yDy/" rel="nofollow"><code>jsFiddle Demo</code></a></em></strong></p> <p>Perhaps you should attempt this by segregating your class names for active/hover a little bit</p> <pre><code>button.largeButton:hover, button.largeButton:active {...} </code></pre> <p>could become</p> <pre><code>button.activeButton:hover, button.activeButton:active {...} </code></pre> <p>and then once the button had been clicked, this class would be removed.</p> <p>sample html</p> <pre><code>&lt;button class="activeButton largeButton"&gt; </code></pre> <p>jquery to remove class</p> <pre><code>$(".activeButton").click(function(){$(this).removeClass("activeButton");}); </code></pre> <hr> <p>There is no pure css way to do this unfortunately. The best way would be to use <code>:visited</code> however, that is not possible because</p> <blockquote> Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used. - <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:visited" rel="nofollow">MDN :visited</a> </blockquote>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload