Как изменить свойства родительского div при наведении дочернего div

Question

Как изменить свойства родительского div при наведении дочернего div. это можно сделать с помощью чистого css?

HTML:

<div class="parent"> 
    <div class="child"> 
    </div> 
</div> 

CSS:

.parent{width:200px;height:100px;background:#cccccc;} 
.child{width:200px;height:100px;background:transparent;} 

Answer 1

Есть ли причина, вы не хотите использовать JavaScript или JQuery?

Вы могли бы просто:

$("#child_id").hover(function(){ 
    $(this).parent("div").addClass("some-class") 
}); 

Answer 2

Там нет parent селектор в CSS.

Вы можете найти достаточно хорошее объяснение, почему это не поддерживается здесь: http://snook.ca/archives/html_and_css/css-parent-selectors

Answer 3

Не с простой CSS вам понадобится форма сценария уведомить родителей о том, что ребенок подвергается завис (например.):

<div id="parentId" class="parent"> 
    <div id="childId" onmouseover="doOnMouseOver()" onmouseout="doOnMouseOut()" class="child"> 
    </div> 
</div> 
<script type="text/javascript"> 
    function doOnMouseOver() { 
     var parentNode = this.parentNode; 
     var newParentClass = parentNode.getAttribute('class') + 'child-beeing-hovered'; 
     parentNode.setAttribute('class', parentClass); 
    } 

    function doOnMouseOut() { 
     var parentNode = this.parentNode; 
     var newParentClass = parentNode.getAttribute('class').replace('child-beeing-hovered', ''); 
     parentNode.setAttribute('class', parentClass); 
    } 
</script> 

Заметьте, что я 've добавил идентификаторы к вашим элементам html, чтобы я мог удержать их с помощью javascript, не делая ненужного кода, и не используя стороннюю библиотеку, такую ​​как jQuery.

Обратите внимание, что вам необходимо также привязать onmouseout или иначе родительский элемент сохранит новый класс с зависанием ребенка.

jQuery действительно упрощает вашу работу, но вы должны попробовать сделать это с помощью javascript хотя бы один раз.

Надеюсь, это поможет.