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 = '<!--[if gt IE ' + (++v) + ']><i></i>< ![endif]-->',
    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

<!-- tab control usability hover triggers -->
<p>Click to get focus and start pressing TAB to switch between items. Press SHIFT+TAB to go back up.</p>
<div class="transition-container"
tabindex="1">
    <img src="http://jquery4u.com/images/mono-icons/round.png"
    class="transition" />
</div>
<div class="transition-container" tabindex="2">
    <img src="http://jquery4u.com/images/mono-icons/left.png"
    class="transition" />
</div>
<div class="transition-container" tabindex="3">
    <img src="http://jquery4u.com/images/mono-icons/home.png"
    class="transition" />
</div>
<div class="transition-container" tabindex="4">
    <img src="http://jquery4u.com/images/mono-icons/heart.png"
    class="transition" />
</div>
<div class="transition-container" tabindex="5">
    <img src="http://jquery4u.com/images/mono-icons/user.png"
    class="transition" />
</div>
<div class="transition-container" tabindex="6">
    <img src="http://jquery4u.com/images/mono-icons/tick.png"
    class="transition" />
</div>
<div class="transition-container" tabindex="7">
    <img src="http://jquery4u.com/images/mono-icons/up.png"
    class="transition" />
</div>
Sam Deering Sam Deering
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.

Related books & courses
Available now on SitePoint Premium

Preview for $1