javascript - CSS:当关注其他元素时悬停

Question

如果您查看以下 CSS:

fieldset#searchform input[type=submit]:hover
{
    background-position: center -13px;
}
fieldset#searchform input[type=text]:focus fieldset#searchform input[type=submit]
{
    background-position: center -26px;
}
fieldset#searchform input[type=text]:focus fieldset#searchform input[type=submit]:hover
{
    background-position: center -39px;
}

想法是按钮可以悬停并更改背景，但如果输入字段具有用户焦点，则按钮在悬停和不活动时将具有不同的背景。但是这不起作用，因为 CSS 不支持它!我怎样才能让它工作？也许是 jQuery？

编辑:我不想做多重定义!

Answer 1

是的，这绝对不是 CSS 的工作方式，因此您需要使用 JS。尝试这样的事情:

通用 JS:

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

通用 CSS:

fieldset#searchform input[type=submit]:hover {
    background-position: 50% -13px;
}
fieldset#searchform input[type=submit].focus {
    background-position: 50% -26px;
}
fieldset#searchform input[type=submit].focus:hover {
    background-position: 50% -39px;
}

---

演示: jsfiddle.net/Marcel/pHsxa