div background color to change onhover

Question

I m trying to make a div s background color change on mouse over      the div  background white     the div a hover background grey  width 100     display block   text-decoration none     only the link inside the div gets the background color     what could I do to make the whole div get that background color   thank you  EDIT   how can I make the whole div to act as a link - when you click anywhere on that div  to take you to an address

User · Answer

Just make the property  important in your css file so that background color doesnot change on  mouse over This worked for me   Example    fbColor       background-color   3b5998  important      color  white

User · Answer

To make the whole div act as a link  set the anchor tag as   display  block   And set your height of the anchor tag to 100   Then set a fixed height to your div tag  Then style your anchor tag like usual   For example    lt html gt   lt head gt       lt title gt DIV Link lt  title gt        lt style type  text css  gt       link-container           border  1px solid          width  50           height  20px              link-container a           display  block          background   c8c8c8          height  100           text-align  center              link-container a hover           background   f8f8f8              lt  style gt    lt  head gt   lt body gt        lt div class  link-container  gt           lt a href  http   www stackoverflow com  gt Stack Overflow lt  a gt       lt  div gt        lt div class  link-container  gt           lt a href  http   www stackoverflow com  gt Stack Overflow lt  a gt       lt  div gt    lt  body gt   lt  html gt    Good luck

User · Answer

The  a hover  literally tells the browser to change the properties for the  lt a gt -tag  when the mouse is hovered over it  What you perhaps meant was  the div hover  instead  which would trigger when the div was chosen   Just to make sure  if you want to change only one particular div  give it an id    lt div id  something  gt    and use the CSS   something hover        instead  If you want to edit a group of divs  make them into a class    lt div class  else  gt    and use the CSS   else        in this case  note the period before the class  name

User · Answer

There is no need to put anchor  To change style of div on hover then Change background color of div on hover    lt div class  div hover  gt  Change div background color on hover lt  div gt    In  css page   div hover   background-color   FFFFFF      div hover hover   background-color   000000

User · Answer

Using Javascript       lt div id  mydiv  style  width 200px background white  onmouseover  this style background  gray    onmouseout  this style background  white    gt      Jack and Jill went up the hill      To fetch a pail of water       Jack fell down and broke his crown       And Jill came tumbling after        lt  div gt

User · Answer

simply try  hover  property of CSS  eg    lt html gt   lt head gt       lt style gt          div                       height 100px              width 100px              border 2px solid red                    div hover                       background-color yellow                 lt  style gt   lt  head gt   lt body gt               lt a href     gt                         lt div id  ab  gt                                   lt p gt  hello there  lt  p gt                         lt  div gt               lt  a gt   lt  body gt     i hope this will help

User · Answer

You can just put the anchor around the div    lt a class  big-link  gt  lt div gt this is a div lt  div gt  lt  a gt    and then  a big-link   background-color  888    a big-link hover    background-color  f88

User · Answer

html code        lt  DOCTYPE html gt       lt html gt       lt head gt  lt title gt this is your web page lt  title gt  lt  head gt       lt body gt       lt div class    nicecolor  gt  lt  div gt       lt  body gt       lt  html gt    css code        nicecolor         color red        width 200px        height 200px               nicecolor hover         color blue           and thats how youll change your div from red to blue by hovering over it

User · Answer

Set  display  block    on a and give some height

User · Answer

you could just contain the div in anchor tag like this    x000D   x000D  a  x000D    text-decoration none  x000D    color  ffffff  x000D    x000D  a div  x000D    width 100px  x000D    height 100px  x000D    background  ff4500  x000D    x000D  a div hover  x000D    background  0078d7  x000D    x000D   lt body gt  x000D   lt a href  http   example com  gt  x000D   lt div gt  x000D  Hover me x000D   lt  div gt  x000D   lt  a gt  x000D   lt  body gt  x000D   x000D   x000D

[css] div background color, to change onhover

Examples related to css

Examples related to colors

Examples related to background

Examples related to hover