I am currently working on implementing opacity effects for an entire form when it is hovered over or when an input box is clicked while the mouse cursor has moved away from the hover area, ensuring that the effect remains visible.
Here is the HTML code I have so far:
<form id="search">
<input id="search-input" type="text" value="Search" />
<input id="search-submit" type="submit" value="" />
</form>
Along with this jQuery script:
$('form#search').hover(function() {
$(this).stop().animate({"opacity": 1});
},function() {
$(this).stop().animate({"opacity": 0.6});
});
Currently, the script only responds to hovering and not when the #search-input field is selected without hovering elsewhere on the page. How can I incorporate this final functionality?
Unfortunately, achieving this using CSS3 is not possible because there is no parent selector that can apply an opacity effect to the entire form when only one input is focused.
Pseudo Code Final Objective
$($('form#search').hover(), $('form#search input').focus()).functionOn(){
$('form#search').stop().animate({"opacity": 1});
}, functionOff(){
$('form#search').stop().animate({"opacity": 0.6});
});