0

我有以下 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;
 }

你可以在这里找到小提琴

两个 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;
}

谢谢你的帮助。

4

3 回答 3

2

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

.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;
 }

小提琴

...但是您应该审查您对透明度的想法...

重新阅读问题后，我认为Moob的建议是正确的，问题的答案是

.profile_outer:hover .profile {box-shadow: 0px 0px 0px 1000px blue;}
于 2013-11-09T22:34:53.953 回答
0

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

出现问题是因为所有元素的默认背景颜色都是透明的

于 2013-11-09T11:44:40.997 回答
0

还有另一种获得这种效果的方法，但实施起来可能真的很烦人。我只是提供它作为完整性的解决方案。实际上，您应该在应该被屏蔽的位上有相同的背景图像：

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-09T22:57:56.793 回答