Iris Color Picker

Question

The goal is to change color of links, but color of hover state.

This will work perfect:
jQuery("body").css( "background-color", ui.color.toString());

But if you want to change color of hover it won't work:
jQuery("a:hover").css( "color", ui.color.toString());

Complete script is:

$('#wide-load').iris({
        width: 170,
        hide: false,
        palettes: ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f'],
        change: function(event, ui) {           
                jQuery("body").css( "background-color", ui.color.toString());
                jQuery("a:hover").css( "color", ui.color.toString());
        }
});

Online script: http://automattic.github.io/Iris/

Answer 1

I know it's been months since you asked for this but I struggled with the exact same thing, and finally found a solution.

What works for me is to append an empty <div> to your body using jQuery and then printing a <style> tag inside it everytime you change your color, like so:

function changeHoverColor(){
    /* 
    check if your '#custom-css' div exists on page
    if not then create it and append it to the body
    */
    if( $('#custom-css').length < 1 ){
        var $cssDiv = $('<div id="custom-css">');
        $cssDiv.appendTo('body');
    }

    var myColor = '#ff7700'; //change this to your color

    /* change the below css to fit your needs */
    var myStyle = '<style>a:hover{color:'+myColor+';}</style>';

    /* 
    finally print it inside your div.
    Now, every time you pick a color, your new css will be generated and will
    overwrite the previous one inside the '#custom-css' div
    */
    $('#custom-css').html(myStyle);
}

Hope it helps. Cheers