У меня есть 4 divs один внутри другой. Когда я нажимаю на большинство внутренних div, я хочу вызвать :hover, но он работает не так, как ожидалось.Как вызвать самонаводящийся элемент на дочернем элементе

Как я могу решить эту проблему? Live demo 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

Смежные вопросы