How to highlight div on click

Question

I would like to highlight a div when it's clicked. Heres the example: www.spidex.org On this website if you hover any of the navigation buttons a div on the top of the page is highlighted.

Answer 1

In your given example, when you hover over the primary navigation items in the super-header, then the body dims. I agree with your analysis that this is managed with some cover div of the body.

One cross-browser approach (using jQuery in this example) you might consider would be the following:

EXAMPLE HTML:

<div class="header">
    <a href="#">Some Link</a>
</div>
<div class="body">
    <div class="body-content">
        [ CONTENT HTML ]
    </div>
    <div class="body-cover"></div>
</div>

EXAMPLE CSS:

.body {
    position: relative; /* container needs position */
}
.body-cover {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: blue;
    /* 
    you could use a sligtly transparent background here, 
    or tween your opacity in your javascript
    */
}

EXAMPLE JavaScript:

// on dom ready
jQuery(function ($) {

// closures
var $links = $('.header a');
var $body = $('.body');
var $content = $body.find('.body-content');
var $cover = $body.find('.body-cover');
var sCoverHiddenCssClassName = 'body-cover-hidden';
var sCoverTweeningCssClassName = 'body-cover-tweening';
var sCoverShowingCssClassName = 'body-cover-showing';

// closure methods
var fMouseOver = function () {
    // check to see if hidden (not already tweening or showing)
    if ($cover.hasClass(sCoverHiddenCssClassName)) {
        // check content, may have changed.
        $cover.css({
            height: $content.outerHeight(),
            width: $content.outerWidth()
        });
        // animate or tween cover (do this however you want)
        $cover
            .removeClass(sCoverHiddenCssClassName)
            .addClass(sCoverTweeningCssClassName)
            .fadeIn(function () {
                // when completed, mark as showing/visible
                $cover
                    .removeClass(sCoverTweeningCssClassName)
                    .addClass(sCoverShowingCssClassName);
            });
    }
};
var fMouseOut = function () {
    // check to see if visible (not already tweening or hidden)
    if ($cover.hasClass(sCoverShowingCssClassName)) {
        // animate or tween cover (do this however you want)
        $cover
            .removeClass(sCoverShowingCssClassName)
            .addClass(sCoverTweeningCssClassName)
            .fadeOut(function () {
                // when completed, mark as showing/visible
                $cover
                    .removeClass(sCoverTweeningCssClassName)
                    .addClass(sCoverHiddenCssClassName);
            });
    }
};
var fClick = function (e) {
    // prevent default if needed for anchors or submit buttons
    // e.preventDefault();
    if ($cover.hasClass(sCoverHiddenCssClassName)) {
        fMouseOver();
    }
    else if ($cover.hasClass(sCoverShowingCssClassName)) {
        fMouseOut();
    }
};


// init interaction
$cover.hide().addClass(sCoverHiddenCssClassName);
$links.each(function () {
    // wire links
    jQuery(this)
        .mouseover(fMouseOver)
        .mouseout(fMouseOut);//
        //.click(fClick);   // use click event if desired
});

});