Unable to execute animation on hover using CSS-CodePudding

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 >
  <div >کدیاد</div>
  <div >جاوا اسکریپت</div>
  <div >پایتون</div>
  <div >آموزش 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?

CodePudding user response：

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

* {
  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 >
  <div >کدیاد</div>
  <div >جاوا اسکریپت</div>
  <div >پایتون</div>
  <div >آموزش php</div>
</div>

CodePudding user response：

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 > // on hover, do something with child class js
   <div ></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.

CodePudding user response：

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