CODEWITHSUNDEEP
htmlcss
user2021917
user2021917

Reputation:

how to change properties of a parent div on hover of child div

how to change properties of a parent div on hover of child div. can it be done with pure 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;}

Upvotes: 0

Views: 2568

Answers (3)

teratzul
teratzul

Reputation: 41

Not with plain CSS you need some form of script to notify the parent that the child is being hovered(eg.): 

<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>

Note that I've added ids to your html elements so that I can get a hold of them with javascript without making the code unnecessary complex nor using a third party library like jQuery.

Note that you need also to bind onmouseout or otherwise the parent element will keep the new class child-beeing-hovered.

jQuery actually makes your job easier but you should try doing this with javascript at least once.

I hope it helps.

Upvotes: 1

jdbosley
jdbosley

Reputation: 166

Is there a reason you do not want to use JavaScript or JQuery?

You could simply:

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

Upvotes: 0

MarcinJuraszek
MarcinJuraszek

Reputation: 125620

There is no parent selector in CSS.

You can find quite good explanation why it's not supported here: http://snook.ca/archives/html_and_css/css-parent-selectors

Upvotes: 0

Related Questions