xxxxxxxxxx
.child-container {
margin-right: 5px;
padding: 10px 12px;
border-radius: 50%;
}
.parent-container:hover {
color: rgb(20, 89, 136); //This is the color for all the child-container when parent is hover//
}
.parent-container:hover .child-container {
background-color: rgb(10, 23, 31); //This is the background-color of the chosen child-container//
}
//When you hover the parent-container, the chosen child-container hover will also work along with the parent-container hover//
//The chosen child-container has also hover style different from the parent-container hover//
//If the parent-container is mouse hover the child-container hover will be trigger too//
xxxxxxxxxx
/* Selecting a child element on :hover parent element*/
.parent:hover .child {
/* ... */
}
xxxxxxxxxx
.parent {
background: white;
pointer-events: none; // this disable the hover on the .parent
&:hover {
background: gray; // hover applied to .parent but disabled by the previous pointer-events: none;
}
a {
pointer-events: auto; // this enable the pointer again
&:hover {
color: red; // this hover only for the a
}
}
}
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
.parent{
width: 500px;
height: 100px;
background-color: red;
cursor:pointer;
}
.parent:hover > .child{
animation-name: example;
animation-duration: 1s;
animation-timing-function: ease;
}
@keyframes example {
0% {margin-left:0px; color:white;}
50%{margin-left:200px;}
}
</style>
</head>
<body>
<div class="parent">
<h3 class="child">hello js</h3>
</div>
</body>
</html>