CSS懸停禁用傳播時，嵌套

我有一個在它的樹某處包含了另一個元素，其可見懸停在容器元素時，應切換的容器元素。這工作得很好CSS懸停禁用傳播時，嵌套

.container .toggle { 
    visibility: hidden; 
} 

.container:hover .toggle { 
    visibility: visible; 
}

問題是，當我巢兩個容器配有獨立.toggle元素懸停在父容器時，這兩個元素是可見的。最簡單的修復方法是更改將>添加到:hover css選擇器中。只要.toggle元素是.container元素的直接子元素，就可以正常工作。

在我的使用案例中，我不能保證是這種情況，.container和.toggle元素之間的元素數量必須是可變的。

我最好的猜測是CSS選擇器.container:hover *:not(.container) .toggle 試圖選擇容器的每一個孩子，這是不是另一個容器的孩子......可悲的是不工作

這裏的小提琴：http://www.w3schools.com/code/tryit.asp?filename=F0N00I8GETY0

任何提示的歡迎，謝謝提前:-)

來源

2016-11-10 Stefan Erichsen

如果你願意規定的最大嵌套級別，你可以做到這一點，如下所示。

div { outline: red 1px solid; } 
 

 
/* Hide toggle elts by default. */ 
 
.toggle { visibility: hidden; } 
 

 
/* Show toggle elts whose container is hovered. */ 
 
.container:hover .toggle { visibility: visible; } 
 

 
/* Unless there is a non-hovered container in between! */ 
 
.container:hover .container:not(:hover) .toggle { visibility: hidden; }

<div class="container"> 
 
    OUTSIDE CONTAINER 
 
    <div class="toggle">OUTSIDE TOGGLE</div> 
 
    <div class="container"> 
 
    INSIDE CONTAINER 
 
    <div class="toggle">INSIDE TOGGLE</div> 
 
</div>

爲了支持三個層次的嵌套，你需要一個規則，如

.container:hover .container:hover .container:not(:hover) .toggle { visibility: hidden; }

來源

2016-11-10 19:02:55

會更好。非常感謝！如果我添加更多嵌套層次（請參閱http://www.w3schools.com/code/tryit.asp?filename=F0OHUDWMUUVZ），並在Firefox和Chromium中測試，您的解決方案效果很好。 –

我能想到的最簡單的事情是切換父.toggle的Elemen時內.toggle元素的可見性切換到hidden噸。

.container .toggle { 
    visibility: hidden; 
} 

.container:hover .toggle { 
    visibility: visible; 
} 
.container:hover .toggle .toggle { 
    visibility: hidden; 
}

但話又說回來，這些代碼不會允許你切換嵌套.toggle元素的可見性，所以你必須添加到上面的代碼：

.toggle:hover .toggle { 
    visibility: visible; 
}

但這只是按預期工作當你只有兩個嵌套的.toggle元素。我不敢說如果你想切換更多的嵌套元素，你需要使用js。

來源

2016-11-10 16:08:32

你就不能添加更多的規則嵌套你想要的每增加一個級別支持？ – 2016-11-10 19:09:03

當然你可以，但是如果嵌套的數量是無限的或者更好的說多於幾個，那將會非常混亂，並且使用js –

如果容器總是在DIV，像這可能是工作

.container:hover div:not(.container) .toggle, .container .container:hover .toggle, .container:hover > .toggle { 
visibility: visible; 
}

來源

2016-11-10 16:28:54 RizkiDPrast

CSS懸停禁用傳播時，嵌套

回答

相關問題