Question

I’m working on a simple hoverIntent bit on two page elements (hovering over “search_over” makes “search” visible, and hovering over “subscribe_over” makes “subscribe” visible), and I can’t figure out why it’s working on “subscribe_over” and not “search_over”. I’m testing now in Chrome and FF, and it works fine on both divs in FF and only on “subscribe_over” in chrome. can you help me figure out why? Maybe also relevant: I was working on this as a stand-alone page, and I’m now in the process of wordpress-ifying it. It might be a product of clashing with functions in wp_head, though I’m not knowledgeable enough about what goes on under the hood there to make an educated guess at the moment.

here’s the jquery code:

var mouseOver = false; 
var mouseOver_search = false;

    $('#subscribe').hide();
    $('#subscribe').hover(
        function(){ mouseOver = true; },
        function(){ 
            mouseOver = false;
            $(this).fadeOut(300); 
        }
    );  
    $("#subscribe_over").hoverIntent({
        over: appear, // Function to call when mouseover is called    
        timeout: 500, // How often in milliseconds the onmouseout should be checked
        out: disappear // Function to call when mouseout is called    
    });

    function appear() {
        $('#search').hide();
        $("#subscribe").fadeIn(50);
    }

    function disappear() {
        if (mouseOver == false) $("#subscribe").fadeOut(300);
    }

    $('#search').hide();
    $('#search').hover(
        function(){ mouseOver_search = true; },
        function(){ 
            mouseOver_search = false;
            $(this).fadeOut(300); 
        }
    );  
    $("#search_over").hoverIntent({
        over: appear_s, // Function to call when mouseover is called    
        timeout: 500, // How often in milliseconds the onmouseout should be checked
        out: disappear_s // Function to call when mouseout is called    
    });

    function appear_s() {
        $('#subscribe').hide();
        $("#search").fadeIn(50);
    }

    function disappear_s() {
        if (mouseOver_search == false) $("#search").fadeOut(300);
    }

so, it’s literally the same code copied and pasted for the two separate elements with separate function names. it’s twice as long as it needs to be, but it’s clear that the two elements are governed identically. if it helps, it’s at http://yummrs.com/blog (and is very much still under construction!).

last time i had a question answered here, i had the trailing comma of death and it was a simple fix, but i don’t see any lingering commas here… thanks in advance for your help.

Answer 1

In your code, you have defined:

<li id="subscribe_over"><a href="#">subscribe &darr;</a></li> 
<li id="search_over"><a>search</a></li> 

Aren’t you missing a href for your search <a> tag?