Animate highlight color on hover with jQuery

Question

On Brackets.io I noticed that when I highlighted their logo and hovered over it changed the highlight color which is something I have never seen before. Also, if you look closely you'll also notice that their icon changes color at the same time. Is this something you can do with Javascript and jQuery? Or could this be done through CSS by itself?

Would it be something like...

$('#logo').hover(function(){
  $(this).animate({ highlight: green }, 'slow');
});

Answer 1

I reassembled a snippet of their HTML and CSS below:

.brackets-logo a {
    color: #000;
    font: 400 19px / 50px source-sans-pro, sans-serif;
    text-decoration: none;
}

.brackets-logo i {
    display: inline-block;
    height: 15px;
    width: 15px;
    margin: 0 7px 0 0;
    position: relative;
    top: 1px;
    background: url(http://brackets.io/img/sprite.svg) no-repeat 0 0;
    background-size: 18px 94px;
}

.brackets-logo:hover {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
    -webkit-transition: all 3s;
    -moz-transition: all 3s;
    transition: all 3s;
}

<h1 class="brackets-logo"><a href="#">
<i></i>Brackets</a></h1>

Looks like they're using the CSS filter property and transition. filter has some decent support using prefixes (sans IE).

Alternative

You could also combine the CSS animate property and the :hover pseudo-class and ::selection pseudo-element to animate the text selection color. You would have to use an inline svg for the little bracket icon though, so you could animate it's fill property as well.

Answer 2

This can be achieved using css filters. Specifically the one you have mentioned is hue-rotate filter. Check out this demo.

You can write css as

myelement:hover{

    filter: hue-rotate(360deg);

}

or to be safe with different browsers

myelement:hover{

     -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
    -webkit-transition: all 3s;
    -moz-transition: all 3s;
    transition: all 3s;

}