Label Hover Example

To test if multiple labels is a good way to link hover/focus states.

by nilloc

HTML

<div id="oneArea">
    <label for="tester" class="tester_text_label">Tester</label><br/>
    <input type="text" id="tester" value="test" />
</div>
<div id="otherArea">
    <label for="tester" class="tester_image_label">
        <img src="http://www.google.com/images/srpr/logo4w.png" alt="tester"/>
    </label>
</div>

<div id="threeArea">
    <label for="tester2" class="tester_text_label">Tester</label><br/>
    <input type="text" id="tester2" value="test2" />
</div>
<div id="fourArea">
    <label for="tester2" class="tester_image_label">
        <img src="http://www.google.com/images/srpr/logo4w.png" alt="tester"/>
    </label>
</div>

CSS

input{
    border:1px solid #c07712;
}
input:focus, input:hover{
    outline:none;
    border-color:#0f0;
}
.tester_text_label{
    color:#c07712;
}
.tester_text_label:hover, .tester_text_label.hover, .tester_text_label:focus{    
    outline:none;
    color:#0f0;
}
.tester_image_label>img{ height:20px; }
.tester_image_label:hover, .tester_image_label.hover, .tester_image_label:focus{
    outline:1px dotted #0f0;
}

JavaScript

$('label').mouseover(function(){
    $('label[for="'+$(this).attr('id')+'"]').addClass('hover');
}).mouseout(function(){
    $('label[for="'+$(this).attr('id')+'"]').removeClass('hover');
    $('#'+$(this).attr('for')).blur();
});

$('input').bind("focus mouseover", function(){
    console.log('focused!');
    $('label[for="'+$(this).attr('id')+'"]').addClass('hover');
}).bind("blur", function(){
    console.log('blurred!');
    if(!$(this).is(':focus')){
        $('label[for="'+$(this).attr('id')+'"]').removeClass('hover');
    }  
});