JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dl.dropbox.com/u/1722364/jsfiddle.css">
<h1>New York, Orlando join anti-TSA rebellion, TSA mounts PR effort</h1>
<p id="first">New York City officials are working to ban the TSA's privacy-busting full-body scanners, while an Orlando airport announces plans to fire the TSA and hire private security instead. Meanwhile, the TSA release a list of "myths" vs. "facts" about the scanners and pat-downs.</p>
<p id="second">This week we looked at what one can do with the open-source PC drivers for the Kinect, we talked about the possible end of Bizarre Creations, and we discovered the Xbox 360 has been the best-selling gaming console this year.
</p>
CSS
h1 {
color: #666;
}
#first {
color: orange;
}
#second {
color: #508850;
}
JavaScript
// getRGB function taken from jQuery color plugin:
// http://plugins.jquery.com/files/jquery.color.js.txt
function getRGB(color) {
var result;
// Look for rgb(num,num,num)
if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
// Look for rgb(num%,num%,num%)
if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)) return [parseFloat(result[1]) * 2.55, parseFloat(result[2]) * 2.55, parseFloat(result[3]) * 2.55];
// Look for #a0b1c2
if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)) return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
// Look for #fff
if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)) return [parseInt(result[1] + result[1], 16), parseInt(result[2] + result[2], 16), parseInt(result[3] + result[3], 16)];
}
$('h1, p').hover(function() {
var rgb = getRGB($(this).css('color'));
for(var i = 0; i < rgb.length; i++){
rgb[i] = Math.max(0, rgb[i] - 60);
}
var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
$(this).css('color', newColor);
}, function() {
$(this).css('color', '');
});