CSS悬停防止 child 受到影响

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