Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to hover a div and hover some elements?

Tags: hover elements

How to hover a div and hover some elements?

Problem

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?

Im a text

Thanks

Problem courtesy of: Chead1988

Solution

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

Hover effect
No hover effect

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.

Solution courtesy of: Tim Medora

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to hover a div and hover some elements?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×