Question

我遇到的问题是我的子元素仍然作为我父元素的:hover，我不想发生这种情况。

有没有办法，使用 css 来阻止我的子元素激活我父元素的悬停？ JSfiddle

以下是我的问题的基本示例：

＆＃13;

div.wrapper {
	width:100%;
	height:100%;
	position:fixed;
	margin:auto auto;
	background-color:rgba(34,34,34,0.5);
	
	transition:background-color ease-in-out 0.25s;
	z-index:98;
}
div.wrapper:hover {
	background-color:rgba(34,34,34,0.25);
	cursor:pointer;
}
    div.wrapper > div.container {
        width:400px;
        height:100%;
        position:relative;
        background:#3498DB;
        box-shadow:0 0 15px rgba(0,0,0,0.25);
    }

＆＃13;

<div class="wrapper">
    <div class="container">
        
    </div>
</div>

＆＃13;

如您所见，当您将鼠标悬停在蓝色区域（儿童）上时，它仍会触发灰色区域（父级）。我该如何解决这个问题？

Answer 1

你为什么这样做？

如果您想悬停孩子，只需将hover添加到孩子。

如果您希望悬停适用于两者，为什么不将它们作为兄弟姐妹而不是父子。

希望这可以帮到你。

Answer 2

试试这个：（JSfiddle）

<div class="wrapper">
    <div class="back">

    </div>
    <div class="container">

    </div>
</div>

CSS

div.wrapper {
    width:100%;
    height:100%;
    position:fixed;
    margin:auto auto;

    z-index:0;
}
div.back {
    width: 100%;
    height: 100%;
    background-color:rgba(34,34,34,0.5);

    transition:background-color ease-in-out 0.25s;
    z-index: 1;
}
div.back:hover {
    background-color:rgba(34,34,34,0.25);
    cursor:pointer;
}
div.wrapper > div.container {
    width:400px;
    height:100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background:#3498DB;
    box-shadow:0 0 15px rgba(0,0,0,0.25);
    z-index: 2;
}

悬停的孩子总是会触发父母悬停，但你可以让假父母达到你的目标。

如何用CSS修复父悬停问题？

2 个答案: