How to make div css background hover


Tags: css

Problem :

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:)



Solution :

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

    CSS Howto..

    How to resize button without cutting the text inside

    How to disable CSS Class on particular DIV

    How can I change this HAML format to normal CSS style?

    how to achieve facebook mobile site buttons menu scroll effect?

    How do I make a jQuery animation work across major browsers?

    How do I make the class 'path' show up at higher zoom levels using carto CSS in MapBox Studio?

    How to Vertically Center 2 anchor tags with CSS?

    how to append a css class to an element by javascript?

    How to have a centered layout with border (background-image), and footer sticked to the bottom?

    How to only get the 'box-shadow-right' that cuts off when you reach a border?

    How do I bottom-align bars in a CSS vertical bar chart?

    css-how to set a three parallel DIV?

    How do I keep multiple DIVs the same height using jQuery?

    How to find class =“class1” included class=“class2” in CSS? [closed]

    How to manipulate the window list color?

    How to make a themeable web application using CSS?

    How to remove mystery indents in a form?

    How to make flexbox grid images responsive

    How to center the Nav-Bar

    How to hide a div based on its class

    How can I create a postage stamp border?

    How to reset tag in CSS

    How can I improve my webpage code to be scalable for smaller sizes?

    How to specify font-size for all bold text in the div?

    How do I use CSS to to vertically center align an image in a div?

    advice about how to vertically center content in fluid element

    How to get hovering shadow under a letter with CSS-only?

    How can I split code-blocks into a list?

    How to centralise a button div

    css margin-left propery - how to specify for various browsers [closed]