CODEWITHSUNDEEP
csshtmlclick
Jerico
Jerico

Reputation: 35

How to highlight div on click

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.

Upvotes: 0

Views: 16926

Answers (4)

A W
A W

Reputation: 1129

JQuery UI is also gives an good option to quickly highlight div . https://jqueryui.com/effect/

$( "#divId" ).effect( "highlight", 500 );

Upvotes: 0

Levi Beckman
Levi Beckman

Reputation: 533

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
});

});

Upvotes: 0

Farhan Javed
Farhan Javed

Reputation: 423

You can change the appearance of elements when hovered using the :hover pseudo-class.

For example

div:hover {
  color: red;
}

Secondly, you can change the text color via using the color property and the background color using the background-color property.

Both are shown below:

div:hover {
  color: black;
  background-color: white;
}

Upvotes: 1

Shidil Eringa
Shidil Eringa

Reputation: 341

You may use jQuery for achieving this.

get jQuery here.

now consider that you have a div that you want to highlight on mouseover called item. do this by adding an overlay div.

div.overlay{
  opacity:0;
  background:#000;
  width:100%;
  height:100%;
  position:absolute;
  top:50px;left:0;
}

then use jquery

jQuery(document).ready(function($){
   $('.item').mouseover(function(){
      $('.overlay').css({opacity:0.3});
   });

});

Upvotes: 1

Related Questions