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

Answer 2

是的，jQuery，甚至普通的javascript都可以：

使用jQuery，使用focus()和blur()。在我的示例中，我只是在发生这些事件时更改提交类。我改变了背景颜色，但你当然可以做任何事情。

http://jsfiddle.net/jtbowden/WPdxE/

代码（简化）：

$(':text').focus(function() {
    $(':submit').addClass('focus');
});

$(':text').blur(function() {
    $(':submit').removeClass('focus');
});

Answer 3

$("fieldset#searchform input[type=text]').focus(function(){
  //do stuff
});

$("fieldset#searchform input[type=text]').blur(function(){
  //change stuff back
});

Answer 4

因此，您试图说明当您关注文本框时，您需要更改需要转到提交按钮。你需要一个javascript而不是CSS，因为你只是在你的CSS中做多个定义，CSS事件只对同一个元素生效，而不是在其他元素上生效。

你可以使用jQuery，

$('fieldset#searchform input[type=text]').focus(function(){
    $('fieldset#searchform input[type=submit]').css('background-position', 'center -26px');

    // this is to add hover event on submit button when focused on text box
    $('fieldset#searchform input[type=submit]').hover(
        function() {
            $('fieldset#searchform input[type=submit]').css('background-position', 'center -39px');
        },
        function() {
            $('fieldset#searchform input[type=submit]').css('background-position', 'center -26px');
        }
    );
});

Answer 5

抢劫waminal是对的。

只想添加：您还可以使用jquery .mouseover（）mouseout（）函数。当你想要拥有相同效果的一大堆元素（现在和将来）时，这会派上用场。在这种情况下，您可以使用.live（）函数进行事件委派。例如

$('.div').live('mouseover mouseout'), function(event){ 
    if (event.type == 'mouseover'){ 
        //do stuff 
        }
    else{ 
        //do stuff } 
    }

参考：http://api.jquery.com/live/

Answer 6

$('selector').hover(
     function(){//put a hover logick code}, 
     function(){//put a blur logick code});
);

Answer 7

我刚刚找到了一种没有任何javascript的方法，以防任何人感兴趣。您必须为每个输入创建一个父元素（我使用div）。如果你在div上测试悬停，你可以做一个“逻辑和”，并测试焦点在输入上，如下所示：

/* no hover, no focus */
fieldset#searchform div.inputparent input[type=submit]
{
    ...
}

/* hover, no focus */
fieldset#searchform div.inputparent:hover input[type=submit]
{
    ...
}

/* no hover, focus */
fieldset#searchform div.inputparent input[type=submit]:focus
{
    ...
}

/* hover, focus */
fieldset#searchform div.inputparent:hover input[type=submit]:focus
{
    ...
}

我没有特别测试这个，但类似的东西。我认为这应该有用，也许你需要玩它。

CSS：当关注其他元素时悬停

7 个答案: