Tab control usability hover triggers in jQuery. Tested and works in Chrome, FF, IE9, IE8.

Load is jsfiddle for TAB demo to work.
jsfiddle

The tabindex Property

  • The tabindex attribute is supported in all major browsers, except Safari.
  • HTML5 – tabindex attribute can be used on any HTML element
  • HTML 4.01 – tabindex attribute can be used with: ,
    ,
    .

jQuery

$(document).ready(function () {

    /* "trigger" hover by adding a CSS class */
    $('.transition-container').on('mouseover', function (e) {
        $(this).find('.transition').addClass('activeHover');
        $(this).on('mouseout', function (e) {
            $(this).find('.transition').removeClass('activeHover');
        });
    });

    /* get key code */
    function getKeyCode(key) {
        //return the key code
        return (key == null) ? event.keyCode : key.keyCode;
    }

    /* for usabiity capture keyboard tabbing */
    $(document).on('keyup', function (eventObj) {
        //tab keycode = 9
        if (getKeyCode(eventObj) == '9') {
            var $el = $(document.activeElement);
            //remove any current active elements
            $('.transition').removeClass('activeHover');
            if ($el.hasClass('transition-container')) {
                $el.find('.transition').addClass('activeHover');
            }
        }
    });

});

/* Internet Explorer sniffer code to add class to body tag for IE version */
var ie = (function () {

    var undef,
    v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while (
    div.innerHTML = '',
    all[0]);

    if (v > 4) {
        $('body').addClass('ie' + v);
    }

}());

CSS

/* transition speed */
 .transition {
    -webkit-transition: -webkit-transform .2s ease-out;
    -moz-transition: -moz-transform .2s ease-out;
    -o-transition: -o-transform .2s ease-out;
    -ms-transition: -ms-transform .2s ease-out;
    transition: transform .2s ease-out;
}
/* IE 9 scale */
 .ie9 .activeHover {
    -ms-transform: scale(1.2, 1.2);
}
/* IE 8 scale */
 .ie8 .activeHover {
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand');
}
/* modern browsers transition */
 .activeHover {
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -o-transform:scale(1.2);
    transform:scale(1.2);
}
/* IE 7 scale */
 .ie7 .activeHover {
    filter: none;
    transform: none;
}
.transition-container {
    border: 1px solid blue;
    margin: 15px;
    padding:5px;
}
*:active {
    border: 1px solid red;
}
}

HTML5


Click to get focus and start pressing TAB to switch between items. Press SHIFT+TAB to go back up.

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.