How can I use hover in a child without the parents hover is activated?
My code can add divs as child or sibling, I've created two classes and two
:hover for each class but when I put the mouse on a child the partent
hover is activate as well.
<!DOCTYPE html>
<html>
<head>
<style>
.Group
{
background-color:white;
}
.Group2
{
background-color:white;
}
.Group:hover
{
background-color:yellow;
}
.Group2:hover
{
background-color:red;
}
</style>
</head>
<body>
<div class="Group">root
<div class="Group">1st child
<div class="Group2">2nd child
<div class="Group">3rd child
</div >
</div >
</div >
<div class="Group">1st child
</div >
</div>
</body>
</html>
and here the demo
Demo
No comments:
Post a Comment