CSS hover sub div изменение цвета фона

У меня есть это Fiddle, и я пытаюсь сделать это, когда вы наводите указатель мыши на каждый раздел div, он только меняет фон для этого раздела. Есть ли способ, которым я могу это сделать, не меняя фона на все? Когда мышь над .two, .one:hover получает увольнение. как я могу сделать это пожар .two, а не .one, когда мышь над .two?CSS hover sub div изменение цвета фона

CSS:

div.one:hover, div.two:hover, div.three:hover{ 
    background-color: #69aeea; 
}

HTML:

<div class="one"> 
    Text 1 
    <div class="two"> 
     Text 2 
     <div class="three">Text 3</div> 
     <div class="three">Text 3</div> 
     <div class="three">Text 3</div> 
    </div> 
    <div class="two"> 
     Text 2 
     <div class="three">Text 3</div> 
     <div class="three">Text 3</div> 
     <div class="three">Text 3</div> 
    </div> 
</div>

источник

2013-11-20 Get Off My Lawn

Что-то вроде этого приемлемо? http://jsfiddle.net/jeremyblalock/98MDb/2/ –

Нет, это не выделяет весь раздел. Если вы наведите курсор на '.one', он должен выделить' .one', '.tw' и' .three'. Если вы наведите курсор на '.two', он должен выделить' .tw' и '.three' как группу. –

Возможный дубликат [Предотвращение события Hover для запуска Div на родительском Div?] (Http://stackoverflow.com/questions/10364511/preventing-hover-event-of-a-div-triggering-on-parent-div) – melancia

К сожалению, вы не можете получить доступ к родительскому элементу в CSS. Это означает, что если вы наведете над дочерним элементом, вы не сможете установить фон своего родителя. Вам нужно будет использовать javascript для достижения того, что вы просите.

источник

2013-11-20 22:30:17 MattDiamant

:hover запускается весь путь до корня родителя (обычно <body>), так что вы не можете запустить его только на ребенка, когда у вас есть :hover указывает на родителя.

Что вам нужно сделать, это изолировать части, которые вы действительно хотите отобразить в режиме зависания, которые в этом случае я завершил, завернув текст в <span>. Это приведет к тому, что состояние :hover будет изолировано от других дочерних элементов этого родителя.

<div class="one"> 
    <span>Text 1</span> 
    <div class="two"> 
    <span>Text 2</span> 
    <div class="three"><span>Text 3</span></div> 
...

Тогда цель именно в CSS: (The > персонаж выбирает прямой потомок одного из родителей)

div > span:hover { 
    background-color: #69aeea; 
}

Вы можете сделать различные цвета в зависимости от уровня, как так:

div.one > span:hover { 
    background-color: #69aeea; 
} 
div.two > span:hover { 
    background-color: #ae69ea; 
} 
div.three > span:hover { 
    background-color: #aeea69; 
}

DEMO:http://jsfiddle.net/shshaw/8uetm/

источник

2013-11-20 22:30:16 shshaw

CSS hover sub div изменение цвета фона

ответ

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