How to make div css background hover

Question

I would like to make div css background hover effect on my very top menu to white(#fff).

It's not a menu link. It's background(rectangular a little bit transparency table. A full width).

If you use F12, you can see 'div.top-strip.color-site-white'.

My site is http://www.samgyoyu.com/ . And I would like to make hover effect like this site. http://www.herschelsupply.com/ .

Thank you and have a nice day:)

Answer 1

add following line to your css

 #secondary-nav ul li:nth-child(n+2) a:hover
   {
      color: black;
      border-bottom: 2px solid black;

     }

Answer 2

Make the background color as transparent

#masthead .color-site-white {
  background-color:rgba(255,255,255,.5);
  position:fixed;
  left: 0;
  right: 0;
}
#masthead .color-site-white:hover {
  background-color:rgba(255,255,255,1);    
}

For IE 7, 8 - This will not support (RGBA) so you must use a png transprent image for background and div:hover also not support for IE so u must use javascript for that.

$("#masthead .color-site-white").hover(function(){
  $(this).css({background:'white'});
})

Answer 3

add these lines to your div

.top-strip color-site-white {
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
}

.top-strip color-site-white:hover {
   background-color: #whatever...
}