html - How to hover a div and hover some elements? -


i want when mouse stay on of div hello, paragraph class nice_day , image dont affected.

how should using css3?

<div class="hello">   <div class="stack"><img src="1.png"/></div>   <div class="overflow"><p class="ilove"><img src="2.png"/>im text</p>        <p class ="programming"im other text</p>          <div class="have">              <img src="3.png"/>             <p class="nice_day"></p>          </div>   </div> </div> 

thanks

option #1 - add selectively

this approach looks @ :hover state of ancestor , adds styles desired.

  1. simple: http://jsfiddle.net/gf7ju/2/
  2. multiple elements: http://jsfiddle.net/gf7ju/3/

css

/* formatting can see boxes */  .hello {     border: 1px solid red;     }  .hello > div {     padding: 6px;     border: 1px solid silver; }  /*   selector(s) here determine element(s) should impacted parent's hover, , should not.  */  .hello:hover div:first-child {     background-color: yellow;     } 

html

<div class="hello">     <div>hover effect</div>     <div>no hover effect</div> </div> 

option #2 - cancel/ignore selectively

depending on properties should modified on hover, apply hover style ancestor , restyle children (e.g. setting background-color white, though parent's hovered background yellow).

i prefer first approach possible.


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -