CSS: hover when focus on other element

http://stackoverflow.com/questions/5333534

HTML

<fieldset id="searchform">
    <input type="text">
    <input type="submit">
</fieldset>

CSS

body, input { font:13px/1.4 'segoe ui', sans-serif; }
input { padding:.15em; }
fieldset#searchform input[type=submit] { cursor:pointer; padding:.2em .8em; background:#FDDEDE; border:1px solid #ECB5B5; }
  fieldset#searchform input[type=submit]:hover { background:#FDFDDE; border-color:#ECECB5; }
  fieldset#searchform input[type=submit].focus { background:#DEFDDE; border-color:#B5ECB5; }
    fieldset#searchform input[type=submit].focus:hover { background:#DEF1FD; border-color:#B5D6EC; }

JavaScript

$("fieldset#searchform :text")
    .focus(function(){
        $(this).parent("fieldset")
            .find(":submit")
            .addClass("focus");
        })
    .blur(function(){
        $(this).parent("fieldset")
            .find(":submit")
            .removeClass("focus");
        });