Question

I am trying to apply opacity effects to a whole form when it is either hovered over or an input box is clicked while the mouse has left hover so that effect does not disappear.

At the moment I have the following html:

<form id="search">
    <input id="search-input" type="text" value="Search" />
    <input id="search-submit" type="submit" value="" />
</form>

And this jQuery:

$('form#search').hover(function() { 
    $(this).stop().animate({"opacity": 1}); 
},function() { 
    $(this).stop().animate({"opacity": 0.6}); 
});

At the moment it only works when you however over and not if the #search-input is clicked while the mouse is elsewhere on the screen, how can I add this final part?

This is not possible to do with CSS3 because you can’t apply the opacity affect to the whole form when only an input is focused as there is no parent selector.

Pseduo Code Final Goal

$($('form#search').hover(), $('form#search input').focus()).functionOn(){
    $('form#search').stop().animate({"opacity": 1}); 
}, functionOff(){
    $('form#search').stop().animate({"opacity": 0.6}); 
});

Answer 1

The code should work pretty well in getting the job done. This also handles for if someone mouses out while they are currently editing an input, and if you are editing an input then click into another “fadeable” div, it should then make the proper transition to the new “fadeable” div.

Only thing missing is your animations, but I think you could change up the addClass/removeClass to your animate, and you should be good to go.

This took some time, so hopefully it helps!

http://jsfiddle.net/vpz2S/