Animate highlight color on hover with jQuery
On Brackets.io I noticed that when I selected their logo and hovered over it, the highlight color changed, which I had never seen before. Moreover, if you look closely, you will also notice that their icon changes color at the same time. Is this something you can do with Javascript and jQuery? Or can this be done with CSS yourself ?
It would be something like ...
$('#logo').hover(function(){
$(this).animate({ highlight: green }, 'slow');
});
source to share
I've put together 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>
It looks like they are using the CSS propertyfilter
and transition
. filter
has some decent support for using prefixes (no IE).
Alternative
You can also combine CSS property animate
and pseudo-element :hover
and pseudo-element ::selection
to animate the highlight color of the text. You will need to use the built-in svg
little brace icon so that you can animate it as a property fill
.
source to share
This can be achieved using css filters. Specifically the one you mentioned is an interleaved filter. Check out the demo .
You can write css like
myelement:hover{
filter: hue-rotate(360deg);
}
or 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;
}
source to share
Use CSS Transitions .
.logo {
color:grey;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
.logo:hover {
color:red;
}
source to share