csspseudo.v2.0.0.jquery.js

Pseudo Class Adder (jQuery) Add pseudo classes by using jQuery

by BananaAcid

HTML

<img src="//placeimg.com/300/300/arch" />

<script>
	// test JS, DOMReady because we wait for jsFiddle to load the Jib
  $(function(){

    // use new stylesheet (is mostly optional, only required in case the first one is locked)
    $.cssPseudo.createSeperateStylesheet();

    $('body')
    .cssPseudo('after', {  // mouse out
      content: '"You should try to hover the picture, then click it."',
      position: 'absolute',
      top: 20, left: 20
    })
    .cssPseudo('hover::after', { // mouse over
      content: '"Now hover the picture, then click it!"'
    })
    .cssPseudo('hover::after', { // mouse over after click
      content: '"Done."'
    }, '.done')							// .done is the class to listen to:  body.done:hover::after
    .cssPseudo('after', { // mouse out after click
      content: '"Thanks."'
    }, '.done');


    $('img')
    .css({
      border: '10px solid white, 10px solid white, 50px solid white, 10px solid white',
      transition: 'all 450ms',
      borderRadius: '50%'
    })
    .cssPseudo(false, { // add base style
      transform: 'scale(.5)',   // `.css()` will overrule `.cssPseudo()` since `.css()` will add to the elements style, and `.cssPseudo()` to the stylesheet. Thatswhy we need to add the basic style like this (and not using .css())
      filter: 'saturate(0)',
    })
    .cssPseudo('hover', { // add img:hover style
      transform: 'scale(1)',
      filter: 'saturate(1)',
      boxShadow: '0 0 40px 0 rgba(0,0,0, .8)',
      cursor: 'pointer'
    })
    .on('click', function() { // listen to click
      $(this)
      .cssPseudo('hover', null)  // remove all 'hover' rules added by `.cssPseudo()`
      .css({										// enforce style (by adding it to the element)
        transform: 'scale(1)',
        filter: 'saturate(1)',
        borderRadius: 10
      })
      .off('click');  // cleanup (stop listener)

      $('body')
      .addClass('done');  // add .done class to body, for cssPseudo texts
    });

    $('body > *')  // just a...

CSS

body, html {height: 100%;}
body {display: flex; justify-content: center; align-items: center;}

JavaScript

(function($) {
	/*
   * cssPseudo - Pseudo Class Adder (jQuery)
   *
   * @author BananaAcid / Nabil Redmann
   * @version 2.1.0
   * @url https://jsfiddle.net/BananaAcid/96rdevhp/
   * @description
   *    use as `.cssPseudo('hover', {...})` or `.cssPseudo('after', {...})` (like you would use `.css({...})`)  to set.
   *			Note: using `hover:after` will not match `hover::after` on this plugin (you have to use the same spelling throughout your code),
   *			but the browser will use the double version and the css will work.
   *
   *    To clear, use 
   *			Use `.cssPseudo(false)` [or `null`] to clear all added pseudo css for that element.
   *    	->(pseudoClass, null/false/"", customSelectorString) -> second param must not be an object, but either null, false or an empty string.
   *			(n/f/'') -> clear all pseudos (pseudo must not be `undefined`), e.g. `.cssPseudo(false)`
   *			(pc, n/f/'') -> clear all of that pseudo, e.g. `.cssPseudo('after', false)`
   *			(pc, n/f/'', customSelectorString) -> clear only pseudoClass with specific customSelectorString, e.g. `.cssPseudo('after', false, '%s.error')`
   *			(n/f/'', n/f/'', customSelectorString) -> clear any pseudoClass with specific customSelectorString, e.g. `.cssPseudo(false, false, '%s.error')`
   *			
   *    To add the selector only, without any pseudo class, just pass null or false as `pseudClass` param.
   *
   *    jQuery will not add empty properties to the css. We need to enforce the quotes on `content` like `{content: '""', ..}`. Also for `content: 'attr(title) ", text"'`
   *
   *    To get a css property use something like `.cssPseudo('after', 'background-color')`.
   *			For multiple rules, only the last occuring value will be used. `{top: 20}` will be returned as `20px`!
   *			Make sure, you use the same `customSelectorString` param again, if any.
   *
   *    `.css()` will overrule `.cssPseudo()` since `.css()` will add to the elements style, and `.cssPseudo()` to the stylesheet. 
   *
   *  ...