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.
- simple: http://jsfiddle.net/gf7ju/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
Post a Comment