Question

I have 3 boxes and once user hovers any, if changes the content of the big main div from default to the related div via featVals hash table

At the if ($('#estate-feature, #carrier-feature, #cleaning-feature').is(':hover')) { part of my code, I want to check if any of these 3 div boxes are currently hovered, if not display the default content (defaultFeat variable).

However I am getting Uncaught Syntax error, unrecognized expression: hover error from Google Chrome Javascript Console.

How can I fix it ?

Regards

$('#estate-feature, #carrier-feature, #cleaning-feature').hover(function () {
    var currentFeatCont = featVals[$(this).attr('id')];
    headlineContent.html(currentFeatCont);
}, function () {
    headlineContent.delay(600)
        .queue(function (n) {
        if ($('#estate-feature, #carrier-feature, #cleaning-feature').not(':hover')) {
            $(this).html(defaultFeat);
        }
        n();
    })
});

Answer 1

:hover isn’t an attribute of the element. Also, you are binding to the hover out there so you know that you have left the hover and can restore the default content. If you want the hover-triggered content to remain for a period after the point has left the trigger element then you’ll either need to assume that you aren’t going to roll over another trigger or implement a shared flag variable that indicates if the default text restore should be halted. e.g.

var isHovered = false;
$('#estate-feature, #carrier-feature, #cleaning-feature').hover(
    function() {
                var currentFeatCont = featVals[$(this).attr('id')];
                headlineContent.html(currentFeatCont);
                isHovered = true;
    }, 
    function() {    
            isHovered = false;
            headlineContent.delay(600)
            .queue(function(n) {
                if (!isHovered) {
                    $(this).html(defaultFeat);
                }
                n(); 
            })
    }
);