CSS: hover when focus on other element

If you look at the following 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;
}

The idea is that a button can be hovered and changed the background, but if the input field has user focus then the button will have a different background when hovered and inactive. However this does not work because CSS doesn't support it! How can I get this to work? jQuery perhaps?

EDI开发者_Go百科T: I am NOT trying to do multiple definitions!

Yeah, that's definitely not how CSS works so you'll need to use JS. Try something like this:

Generic JS:

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

Generic 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;
}

Demo: jsfiddle.net/Marcel/pHsxa

Yes, jQuery, or even plain javascript will do:

With jQuery, use focus() and blur(). In my example, I just change the submit class when these events occurred. I changed the background-color, but you could do anything of course.

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

The code (simplified):

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

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

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

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

so you are trying to say that when you focus a textbox, you changes needs to go to the submit button. you need a javascript on that, not CSS because you just do in your CSS is for multiple definitions, CSS events only takes effect on the same element, not on other element.

Using jQuery you can,

$('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');
        }
    );
});

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

rob waminal is right.

Just wanted to add: You can also use jquery .mouseover() mouseout() functions. This comes in handy when you have a whole bunch of elements (now and in future) where you want to have the same effect. In that case you can use the .live() function for event delegation. Eg.

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

reference: http://api.jquery.com/live/

I just found a way to do it without any javascript, in case anybody's interested. You'd have to make a parent element (I used div) for each input. You can do a "logical and" if you test for hover on the div, and test for focus on the input, like so:

/* 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
{
    ...
}

I didn't test this in particular, but something similar. I think this should work, maybe you'll need to play with it.