CSS悬停防止受到影响的孩子

我有以下div狭窄。CSS悬停防止受到影响的孩子

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

下面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; 
}

，你可以找到fiddle here

双方的div没有背景，背景由一些家长格的图像来确定。所以它们是透明的。

因此，在悬停我只是想改变外部配置文件的背景。

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

感谢您的帮助：这只是如果我还更改使用

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

我想这些了以下组合内div的背景色工作。

来源

2013-11-09 Coen Damen

嗯，我想这是你想要的效果是这样的

.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

...但你应该审查你的透明度的想法...

重新阅读这个问题后，我认为Moob的消化是正确的，ans问题是

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

来源

2013-11-09 22:34:53 vals

+1，巧妙的解决方案。虽然我认为OP实际上想要'.profile_outer：hover .profile {box-shadow：0px 0px 1000px blue;}'（http://jsfiddle.net/gJpbG/2/） – Moob

辉煌，谢谢！ –

将孩子的背景设置为#fff，它会起作用。

你的问题发生，因为所有元素的默认背景颜色是透明

来源

2013-11-09 11:44:40 silicakes

我想，但我不希望出现这种情况。我想除了外部的div都透明。所以突出显示。 –

是的，应该是班级，例如错字 –

但透明对您意味着什么？如果一个透明元素位于蓝色背景元素的顶部，它将不可避免地显示父级的蓝色 – silicakes

还有一种方法可以得到这种效果，但它可能真的很烦人的实施。我只是提供它作为完整性的解决方案。有效地你有是应该出现掩盖对位相同的背景图片：

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/

来源

2013-11-09 22:57:56 Moob

CSS悬停防止受到影响的孩子

回答

相关问题