jQuery Hover Function Help

Question

Hi,

Using the jQuery hover function, I want to set an iframe src value to null when the user clicks on the menu item that matches the following:

<li class="current">
<a class="sf-with-ul" href="#">CTI</a>

I basically want to check when the user clicks on the top level menu item when the class is "sf-with-ul" and a href is "#"

Unsure how to do this and then attach hover function when the user clicks on the above selector.

Again, only want to fire the hover function at the top/parent level (first occurence ONLY).

Thanks.

Answer 1

Without knowing your exact markup, its a little guessing game. But in general

$('li.current:first').find('a.sf-with-ul').bind('click', function(e){
    $('iframe').hover(function(){
       // mouseenter
    }, function(){
       // mouseleave
    });
});

should do it for the click event.

Reference: :first

Answer 2

You'd probably want to look into jQuery selector syntax. http://api.jquery.com/attribute-equals-selector/

If I am understanding your problem correctly, I'd try something like this.

var clicked = false;

$(".sf-with-ul[href='#']").click( function () {
  clicked = true;
});

// Only hover if it's clicked

$("selector").hover( function () {
  if (clicked) {
  // do something hover over
}
}, function () {
 if (clicked) {
  // do something hover out
}
});

EDIT: Another answer uses .bind to enable the hover which I like more, makes it a little more elegent.