Question

我有以下div限制。

<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都没有背景，背景由某个父div上的图像决定。所以它们是透明的。

因此，在悬停时我只想更改外部轮廓的背景。它只有在我也使用

更改内部div的背景颜色时才有效

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

我尝试了以下这些组合：

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

感谢您的帮助。

Answer 1

嗯，我猜你想要的效果就是这个

.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的消化是正确的，问题的答案是

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

Answer 2

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

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

Answer 3

还有另外一种方法可以获得这种效果，但实施起来可能非常烦人。我只是提供它作为完整性的解决方案。实际上，你应该看到掩盖的位上有相同的背景图像：

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/

CSS悬停可以防止儿童受到影响

3 个答案: