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

Question

I want that when the mouse stay over of the div hello, the paragraph with class nice_day and image dont be affected.
How should do it using css3?
<div class="hello">
<div class="stack"><img src="1.png"/></div>
<div class="overflow"><p class="ilove"><img src="2.png"/>Im a 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

Answer 1

Option #1 - Add Selectively
This approach looks at the :hover state of the ancestor and only adds styles where desired.
Simple: http://jsfiddle.net/gF7Ju/2/
Multiple Elements: http://jsfiddle.net/gF7Ju/3/
CSS
/* just for formatting so we can see the boxes */
.hello {
border: 1px solid red;
}
.hello > div {
padding: 6px;
border: 1px solid silver;
}
/*
Selector(s) here to determine which element(s) should be impacted by the
parent's hover, and which 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 what properties should be modified on hover, you could apply the hover style to the ancestor and then restyle the children (e.g. setting background-color to white, even though the parent's hovered background is yellow).
I prefer the first approach where possible.

Answer 2

IF you want to keep styles of child elements on hover of parent element, you need to cancel the parent style like following
.hello{text-decoration: underline;}
.hello:hover img, .hello:hover .nice_day{text-decoration: none}
Note that we're setting text-decoration: none for the children elements, img; and .nice_day in case they get underlined when .hello is hovered.

Answer 3

you can set again your default css to p.nice_day :
div.hello:hover p.nice_day{
//your default css of .nice_day
}