Help with IF has focus then… statment

Question

in a sidebar I have:

<div id="my_id"> [shortcode]</div>

It outputs a title that when hovered on drops down to show a menu.

When hovering on the title a background color shows up and disappears when the mouse moves down to the menu items.

I need for the background color to remain as long as the menu has focus, I need something like:

If #my_id has focus then .my_link {background:red;}

I have looked and the only thing that looked promising was (not really sure how to use this)

JQuery:js_focus

$(document).ready(function() {    

   $('input').blur(function(){
            $('input').removeClass("focus");
      })
         .focus(function() {                
             $(this).addClass("focus")
      });

});

CSS:

.focus {
    background:red;
    }

In functions.php:

function load_scripts() {
   wp_enqueue_script('jquery');
   wp_enqueue_script('my_javascript_file', 'http://example.com/wp-content/themes/Child-Theme/js_focus.js', array('jquery'));
}    
add_action('init', 'load_scripts');

Then in style.css:

.focus .my_link {background:red;}

Is this a good approach?, if so (not working at the moment) I only want focus on the menu to give the background color.

If not a good approach any other ideas all are welcomed and appreciated

Thanks Tim

Answer 1

Your jQuery is not correct (syntax and logic), this isn't really a WordPress question. To toggle focus effects you can do something like this, http://stackoverflow.com/questions/5608181/jquery-toggle-focus