1

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

Chead1988
  • 29
  • 6

3 Answers3

1

Option #1 - Add Selectively

This approach looks at the :hover state of the ancestor and only adds styles where desired.

  1. Simple: http://jsfiddle.net/gF7Ju/2/
  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.

Tim M.
  • 53,671
  • 14
  • 120
  • 163
  • theres a way wihout use first-child selector? like, selecting only the second option? – Chead1988 Apr 05 '13 at 09:06
  • Sure, *any* selector is valid. I'll add another example for you. – Tim M. Apr 05 '13 at 09:07
  • 1
    Oh that is great! :D Thank you so much by your answer! :} – Chead1988 Apr 05 '13 at 09:10
  • Just another quickly quest, is there a way to add a hover in 2 div without be parent? like hover in a div-left and div-right? – Chead1988 Apr 05 '13 at 09:14
  • no 2 div separately without be a family, like div-hello1 and div-hello2. when i put mouse over div-hello1, div-hello2 be hover also, understand? – Chead1988 Apr 05 '13 at 09:20
  • No, i mean like this `
    ..content
    ..content
    `. When i hover hello1, hello2 will be affected too. that is not possible? must be inside a div father?     – Chead1988 Apr 05 '13 at 09:26
  • Sort of, with the adjacent sibling selector (`+`). It only works in one direction though, like this: http://jsfiddle.net/gF7Ju/6/, because CSS selectors typically can't look *ahead*, only behind. – Tim M. Apr 05 '13 at 09:29
0

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.

Ejaz
  • 8,719
  • 3
  • 34
  • 49
0

you can set again your default css to p.nice_day :

div.hello:hover p.nice_day{
   //your default css of .nice_day
}
mehdi
  • 1,755
  • 2
  • 15
  • 21