A while ago I wrote a sIFR vs Typeface.js article, and ever since then I’ve seen hits to my site from people searching for a :hover workaround for Typeface. Here’s a limited solution. It’s using jQuery, but you could easily adapt this method to use another library (or none at all). I’ll admit this isn’t the most eloquent solution in the world, but this proved to be functional, so I thought I’d share.
var typefacehover = function (){ $(".typeface-js").each(function(){ //Get all the classes for an element. var elementStyles = $(this).attr('class'); elementStyles = elementStyles.split(' '); //Run through them and check for a :hover color property. var hoverColor; for (var i in elementStyles){ var temp = getCSSColor('.'+elementStyles[i]+':hover'); if(temp) { hoverColor = temp; } } if(hoverColor){ var element = $(this).html(); //Duplicate the element, create a new hover version of the element (hidden) and add a container to each one so that we can distinguish between the two. var hoverElement = '<div class="typeface-js-hover" style="color:'+hoverColor+';display:none">'+element+'</div>'; element = '<div class="typeface-js-nohover">'+element+'</div>'; var newElement = element + hoverElement; $(this).html(newElement); //Add the event listener. You could do fade transitions here if you wanted to be fancy. $(this).hover( function(){ $(".typeface-js-nohover",this).hide(); $(".typeface-js-hover",this).show(); }, function(){ $(".typeface-js-nohover",this).show(); $(".typeface-js-hover",this).hide(); }); } }); } //Kudos: http://www.mail-archive.com/jquery-dev@googlegroups.com/msg03390.html var getCSSColor = function(selector){ var re = new RegExp('(^|,)\\s*'+selector.toLowerCase()+'\\s*(,|$)'); var color; $.each ($.makeArray(document.styleSheets), function(){ $.each (this.cssRules || this.rules, function(){ if (re.test(this.selectorText)) { color = this.style.color; } }); }); return color; }
I hope to find the time to develop a more robust solution in the future. Let me know if this was helpful!
Date: Monday, April 19th, 2010
Category: Web Dev