Unable to execute animation on hover using CSS - html

Question

I need to show some <div> boxes after hovering on the <div> with codeyad class (.codeyad).
* {
direction: rtl;
}
html,
body {
display: flex;
justify-content: center;
align-items: center;
}
.container {
text-align: center;
font-size: 19px;
}
div :not(.container, .codeyad) {
border: 1px solid rgb(59, 59, 59);
padding: 5px;
margin: 2px;
position: relative;
left: 120%;
opacity: 0;
}
div.js {
transition: left 0.3s 0.2s, opacity 0.3s 0.2s ease-in-out;
}
.python {
transition: all 0.6s 0.2s ease-in-out;
}
.php {
transition: all 0.9s 0.2s ease-in-out;
}
div.codeyad:hover div.js {
left: 0%;
opacity: 1;
}
<div class="container">
<div class="codeyad">کدیاد</div>
<div class="js">جاوا اسکریپت</div>
<div class="python">پایتون</div>
<div class="php">آموزش php</div>
</div>
The problem is with the following part:
div.codeyad:hover div.js{
left: 0%;
opacity: 1;
}
I need to show the <div> with class js by using animations after hovering on the <div> with class codeyad, but it doesn't execute!
Can anyone help?

Answer 1

You need to modify your selector like below. It will select the class .js only when your hover on div.codeyad. learn about + - (Adjacent sibling combinators).
It will work until you keep the HTML structure as is. i.e. .codeyad is immediately followed by .js
div.codeyad:hover + div.js {
left: 0%;
opacity: 1;
}
Working code below (updated with comments)
* {
direction: rtl;
}
html,
body {
display: flex;
justify-content: center;
align-items: center;
}
.container {
text-align: center;
font-size: 19px;
}
div :not(.container, .codeyad) {
border: 1px solid rgb(59, 59, 59);
padding: 5px;
margin: 2px;
position: relative;
left: 120%;
opacity: 0;
}
div.js {
transition: left 0.3s 0.2s, opacity 0.3s 0.2s ease-in-out;
}
.python {
transition: all 0.6s 0.2s ease-in-out;
}
.php {
transition: all 0.9s 0.2s ease-in-out;
}
div.codeyad:hover~div.js,
div.codeyad:hover~div.php,
div.codeyad:hover~div.python {
left: 0%;
opacity: 1;
}
<div class="container">
<div class="codeyad">کدیاد</div>
<div class="js">جاوا اسکریپت</div>
<div class="python">پایتون</div>
<div class="php">آموزش php</div>
</div>

Answer 2

Yup, you can achieve this by using this: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
A note to keep in mind when using this: It'll work "only if it immediately follows the first element, and both are children of the same parent"
So to get the desired result you would do something like this:
div.codeyad:hover+div.js {
left: 0%;
opacity: 1;
}

Answer 3

With this code (last snippet provided), you are accessing div with class "js", that is a child of div class "codeyad"
You are telling css something like this =>
<div class="codeyad"> // on hover, do something with child class js
<div class="js"></div>
</div>
I think the easiest solution is with javascript, where you can access hover functions. Or you can also try with CSS, but it is a little tricky, you have to know CSS selectors. Link provided here.