CSS Hover one element effect for multiple elements

Question

I m looking for a method for my hovering issue    lt div class  section  gt    lt div class  image  gt  lt img src  myImage jpg    gt  lt  div gt    lt div class  layer  gt Lorem Ipsum lt  div gt    lt  div gt    Now  both classes  image and layer  have borders  Both have different color for normal and hover  Is there way to make it  so if I hover layer class  both layer and image class hovering border color is active  And vise versa

User · Answer

This is not difficult to achieve  but you need to use the javascript onmouseover function  Pseudoscript     lt div class  section   gt    lt div class  image  gt  lt img src  myImage jpg  onmouseover   layer  border  1px solid black    image  border  1px solid black      gt  lt  div gt    lt div class  layer  gt Lorem Ipsum lt  div gt    lt  div    Use your own colors  You can also reference javascript functions in the mouseover command

User · Answer

You d need to use JavaScript to accomplish this  I think   jQuery     function           innerContainer   hover          function                    innerContainer   css  border-color    FFF                    outerContainer   css  border-color    FFF                       function                    innerContainer   css  border-color    000                    outerContainer   css  border-color    000                           Adjust the values and element id s accordingly

User · Answer

I think the best option for you is to enclose both divs by another div  Then you can make it by CSS in the following way    lt html gt   lt head gt   lt style gt    div both hover  image   border  1px solid blue     div both hover  layer   border  1px solid blue    lt  style gt   lt  head gt    lt body gt   lt div class  section  gt    lt div class  both  gt     lt div class  image  gt  lt img src  myImage jpg    gt  lt  div gt     lt div class  layer  gt Lorem Ipsum lt  div gt   lt  div gt    lt  div gt   lt  body gt   lt  html gt

User · Answer

This worked for me in Firefox and Chrome and IE8      lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt    lt html gt       lt head gt           lt style type  text css  gt          div section hover div image  div section hover div layer               border  solid 1px red                     lt  style gt       lt  head gt       lt body gt           lt div class  section  gt               lt div class  image  gt  lt img src  myImage jpg    gt  lt  div gt               lt div class  layer  gt Lorem Ipsum lt  div gt           lt  div gt       lt  body gt   lt  html gt        you may want to test this with IE6 as well  I m not sure if it ll work there

User · Answer

OR   section hover  gt  div     background-color   0CF      NOTE Parent element state can only affect a child s element state so you can use     image hover    layer     background-color   0CF     image hover     background-color   0CF      but you can not use    layer hover    image     background-color   0CF

User · Answer

You don t need JavaScript for this   Some CSS would do it  Here is an example    x000D   x000D   lt html gt  x000D     lt style type  text css  gt  x000D       section   background  ccc    x000D       layer   background  ddd    x000D       section hover img   border 2px solid  333    x000D       section hover  layer   border 2px solid  F90    x000D     lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D     lt div class  section  gt  x000D       lt img src  myImage jpg    gt  x000D       lt div class  layer  gt Lorem Ipsum lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

[css] CSS: Hover one element, effect for multiple elements?

Examples related to css

Examples related to xhtml

Examples related to hover