/* Selecting a child element on :hover parent element*/
.parent:hover .child {
/* ... */
}<!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>