Question

I have a div which contains navigation items, along with a text input (which will be used as a search bar). When the user hovers over the navigation div, the opacity changes from 0.6 to 1 using CSS and then back again when the user moves their mouse away.

I want to use either CSS or jQuery to keep the opacity at 1 if the search input is in focus whether or not the user is hovering over the navigation bar. I have tried using a simple if function (my knowledge of jQuery isn’t great):

if ($("#navsearchbox").is(":focus")){
  $("#navbar").css('opacity', '1');
}

This probably works in the sense that it is being appended when the search input is first focused on, but I guess as soon as the user moves their mouse away from the navigation div the CSS might be overriding that?

Any suggestions?

EDIT: I have almost got this working by using jQuery to control the hover opacity for the navbar div, but how do I set up a jQuery function that will detect if the navbarsearch input is not in focus?

Answer 1

You’re close, but try this:

$("#navsearchbox").focus(function(event){
  $("#navbar").css('opacity', '1');
}).blur(function(event){
  $("#navbar").css('opacity', '0.5');
});