CODEWITHSUNDEEP
css
Coen Damen
Coen Damen

Reputation: 2109

CSS hover prevent child from affected

I have the following div stricture.

<div class="profile_outer>
   <div class="profile"></div>
</div>

And the following CSS

.profile_outer {
    border: 2px solid #660000;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.profile {
    width: 198px;
    height: 225px;
    border: 1px solid #660000;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    z-index: 100;
 }

 .profile_outer:hover {
background-color: blue;
 }

you can find the fiddle here

Both divs do not have a background, the background is determined by an image on some parent div. So they are transparent.

So, on a hover I just want to change the background of the outer profile. It only works if I also change the background color of the inner div using

.profile_outer:hover .profile {
display: block;
background : #fff; // but I do NOT want to change the background
}

I tried the following combinations of these:

.profile_outer:hover .profile {
display: block;
background : none !important;
    background-color:transparent;
}

Thanks for your help.

Upvotes: 0

Views: 148

Answers (3)

vals
vals

Reputation: 64164

Well, I guess that the effect that you want is this 

.profile_outer {
    border: 2px solid #660000;
    border-radius: 5px;
    overflow: hidden;
}

.profile {
    width: 198px;
    height: 225px;
    border: 1px solid #660000;
    border-radius: 5px;
    z-index: 100;
 }

 .profile:hover {
    box-shadow: 0px 0px 0px 1000px blue;
 }

fiddle

... but you should review your ideas about transparency ...

After re-reading the question, I think that Moob's sugestion is right, the answer to the question is

.profile_outer:hover .profile {box-shadow: 0px 0px 0px 1000px blue;}

Upvotes: 2

Moob
Moob

Reputation: 16184

There is one other way to get this effect but it could be really annoying to implement. I'm only offering it up as a solution for completeness. Effectively you have the SAME background image on the bit that is supposed to appear masked:

body {
    margin:0px;
    background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') 0 0 repeat;
}
.profile_outer {
    margin:20px; /* added this just to show that you'd need to offset the image placement in .profile depending on its position */
}
.profile {
    background:#fff url('http://lorempixel.com/output/cats-q-c-640-480-5.jpg') -20px -20px repeat;
}

http://jsfiddle.net/PdQFJ/1/

Upvotes: 0

silicakes
silicakes

Reputation: 6902

Set the child's background to #fff and it'll work.

Your problem happens because the default background color for all elements is transparent

Upvotes: 0

Related Questions