Geek asks and answers

CSS: hover over another 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 the button may be overhanging and change the background, but if the input field has the user's focus, then the button will have a different background when it hangs and is inactive. However, this does not work because CSS does not support it! How can I make this work? Is jQuery possible?

EDIT: I am NOT trying to perform multiple definitions!

+3
source share
7 answers

Yes, this is definitely not the way CSS works, so you will 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"); });

General 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

+4
source

, jQuery javascript :

jQuery focus() blur(). submit, . , - , .

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

():

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

$(':text').blur(function() {
    $(':submit').removeClass('focus');
});
+2
$("fieldset#searchform input[type=text]').focus(function(){
  //do stuff
});

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

, , . 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');
        }
    );
});
+1

rob 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/

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

I just found a way to do this without any javascript if anyone is interested. You will need to create a parent (I used a div) for each input. You can do "boolean" and "if you check to hover over a div and check focus on the input, for example:

/* 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 have not tested this in particular, but something like that. I think this should work, maybe you will need to play with it.

0
source

More articles:


All Articles