Skip to content
Enable a smooth hover color transition on Cufonized elements
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.gitignore
README.md
jquery.cufon-smooth-hover.css
jquery.cufon-smooth-hover.js
jquery.cufon-smooth-hover.min.js
jquery.cufon-smooth-hover.scss

README.md

Cufon-Smooth-Hover

I like Cufon, it enables us to put custom smooth and thin fonts in webpages (against the thicker Google Web Font API). However, a huge drawback in styling (for me) is that Cufon is not capable of smooth hover transitions. It CAN change colors when a link was hovered, but with absolutely no transition.

Cufon Smooth Hover enables a smooth hover color transition on Cufonized elements.


Demo

See it in action: http://bfintal.github.com/Cufon-Smooth-Hover/


Usage

1. Include the javascript and stylesheet into your webpage:
<link rel="stylesheet" href="jquery.cufon-smooth-hover.css" type="text/css" media="all">
<script type="text/javascript" src="jquery.cufon-smooth-hover.min.js"></script>
2. Write your Cufon anchor links properly (a inside headers):
<h3>Hello <a href='#'>World</a></h3>
3. Call $.cufonHover() when jQuery is ready:
<script type="text/javascript">
jQuery(document).ready(function($){
    Cufon.replace('h3');
    $.cufonHover();
});
</script>
4. Style your hover color
<style type="text/css">
/* Normal link color */
a {
    color: hotpink;
}
/* Hover link color */
a.csh {
    color: royalblue;
}
</style>

Parameters

speed

Time in milliseconds for the hover transition. Default is 400 milliseconds.

$.cufonHover({speed:400});

Styling

Specifying the color of the hover cufon is done by css. The hover-cufon is assigned the class csh. For example:

/* The hover color
a.csh {
    color: royalblue;
}

How does it work?

The plugin finds cufon elements inside anchor a tags and creates a clone of it. This clone is Cufonized and then positioned on top of the original link and is hidden from view. When your mouse hovers on this element, it is animated in and the original one is animated out.


Browser support

  • Chrome
  • Firefox
  • Opera
  • Safari
  • IE 8 (untested)
  • IE 9 (untested)
  • IE 10 (untested)

Some weirdness

There's some weirdness with the process of Cufon Smooth Hover. Since in some cases (e.g. maybe a floating menu with cufon anchor links), the script waits 100 ms before proceeding, or else the positioning of the hover effect will be way off.

Author

Created by @bfintal.

Follow me in Twitter @bfintal and @gambitph.

Something went wrong with that request. Please try again.