我有4 divs一個在其他內部。當我把鼠標放在大多數內部div上時，我想觸發:hover，但它不能按預期工作。如何觸發子元素自我懸停

我該如何解決這個問題？現場演示here

HTML是這樣的。

<div class="orange"> 
    <div class="white"> 
    <div class="green"> 
     <div class="blue"> 

     </div> 
    </div> 
    </div> 
</div>

CSS是這樣的。

.orange:hover .blue { 
    background-color: orange; 
} 
.white:hover .blue { 
    background-color: white; 
} 
.green:hover .blue { 
    background-color: green; 
} 
.blue:hover{ 
    background-color:blue; 
} 
.orange 
{ 
    position:fixed; top:0; left:0; 
    border-style: solid; 
    border-width: 1px; 
    height:400px; 
    width:400px; 
    background-color:orange; 
} 
.white 
{ 
    top: 50px; margin: 0 auto; 
    position: relative; 
    border-style: solid; 
    border-width: 1px; 
    height:300px; 
    width:300px; 
    background-color:white; 
} 
.green 
{ 
    top: 50px; margin: 0 auto; 
    position: relative; 
    border-style: solid; 
    border-width: 1px; 
    height:200px; 
    width:200px; 
    background-color:green; 
} 
.blue 
{ 
    top: 50px; margin: 0 auto; 
    position: relative; 
    border-style: solid; 
    border-width: 1px; 
    height:100px; 
    width:100px; 
    background-color:blue; 
}

來源

2015-09-04 Aditya Ponkshe

我是一個有點困惑你的期望的行爲是什麼，但我編輯你的小提琴成爲我認爲你想要的： http://codepen.io/anon/pen/qOEXMj。這個解決方案不需要你改變你的html。 – daniman

這工作，但我真的想解決更大的問題，防止使用CSS的默認值。 –

@daniman你可以把這個答案我會接受它。 –

製作!important將解決您的問題。但使用!important多少是柔性的，你的，它取決於你的代碼
見fiddle

.orange:hover .blue { 
 
    background-color: orange; 
 
} 
 
.white:hover .blue { 
 
    background-color: white; 
 
} 
 
.green:hover .blue { 
 
    background-color: green; 
 
} 
 
.blue:hover{ 
 
background-color:blue !important; 
 
} 
 
.orange 
 
{ 
 
    position:fixed; top:0; left:0; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    height:400px; 
 
    width:400px; 
 
    background-color:orange; 
 
} 
 
.white 
 
{ 
 
    top: 50px; margin: 0 auto; 
 
    position: relative; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    height:300px; 
 
    width:300px; 
 
    background-color:white; 
 
} 
 
.green 
 
{ 
 
    top: 50px; margin: 0 auto; 
 
    position: relative; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    height:200px; 
 
    width:200px; 
 
    background-color:green; 
 
} 
 
.blue 
 
{ 
 
    top: 50px; margin: 0 auto; 
 
    position: relative; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    height:100px; 
 
    width:100px; 
 
    background-color:blue; 
 
}

<div onmouseover="chbg('red')" class="orange"> 
 
    <div class="white"> 
 
    <div class="green"> 
 
     <div class="blue"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-09-04 04:56:54 Sachink

它可能工作，+1。 –

添加另一個在最內環中受影響的類。它發生的方式是因爲你的類是嵌套的。

CSS

.orange:hover .inner { 
    background-color: orange; 
} 

.white:hover .inner { 
    background-color: white; 
} 

.green:hover .inner { 
    background-color: green; 
} 

.blue:hover .inner { 
    background-color: blue; 
} 


.inner { 
    top: 0px; 
    margin: 0 auto; 
    position: relative; 
    border-style: solid; 
    border-width: 0px; 
    height: 100px; 
    width: 100px; 
    background-color: white; 
}

HTML

<div onmouseover="chbg('red')" class="orange"> 
    <div class="white"> 
    <div class="green"> 
     <div class="blue"> 
     <div class="inner"> 

     </div> 
     </div> 
    </div> 
    </div> 
</div>

留下你的顏色類的其餘部分，因爲它們。

來源

2015-09-04 04:47:20 trh

如何觸發子元素自我懸停

回答

CSS

HTML

相關問題