Hoverable bindingHandler

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
<table>
<thead>
    <tr>
        <th>Col 1</th>
    </tr>
</thead>
<tbody data-bind="foreach: items">
    <tr class="original" data-bind="hoverable: { selected: selected }">
        <td data-bind="text: text"></td>
        <td><input type="button" data-bind="click: change" value="change" /></td>
    </tr>
</tbody>
</table>
<p data-bind="text: ko.toJSON($root)"></p>

CSS

.original { background: Red }

JavaScript

ko.bindingHandlers.hoverable = {
    init: function(element, valueAccessor) {
        var $e = $(element),
            col = $e.css('background'),
            v = ko.utils.unwrapObservable(valueAccessor());

        $e.data('original-background', col);

        $e.mouseenter(function() {
            $e.css("background", v.mouseenter || "#FFFFFF");
        });

        $e.mouseleave(function() {
            $e.css("background", $e.data('background'));
        });
    },
    update: function(element, valueAccessor) {
        var v = ko.utils.unwrapObservable(valueAccessor()),
            $e = $(element),
            col = v && ko.utils.unwrapObservable(v.selected) ? v.selectedColour || "#fec55e" : 
            $e.data('original-background');

        $e.css('background', col);
        $e.data('background', col);
    }
};

function ViewModel() {
    var self = this;

    self.items = ko.observableArray([{
        text: 'item1',
        selected: ko.observable(true),
        change: function() {
            this.selected(!this.selected());
        }},
    {
        text: 'item2',
        selected: ko.observable(false),
        change: function() {
            this.selected(!this.selected());
        }}]);
}

ko.applyBindings(new ViewModel());