Unable to execute animation on hover using CSS

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?

Tushar Gupta · Accepted Answer · 2022-03-21 15:38:03Z

2

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>

edited Mar 21, 2022 at 15:38

answered Mar 21, 2022 at 12:54

Tushar Gupta

16k1 gold badge33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Hossein Over a year ago

Thanks. What if I want to use div.php, div.python, div.js at a time?

Tushar Gupta Over a year ago

I did not get you, can you please explain?

Hossein Over a year ago

I mean, assume that I need to show all the child <div>s within the <div> with container class aftaer hovering on the <div> with codeyad class. actually showing all the three <div>s brought in the following:

<div class="js">جاوا اسکریپت</div>   <div class="python">پایتون</div>   <div class="php">آموزش php</div>

Tushar Gupta Over a year ago

Then you can use div.codeyad:hover ~ div { left: 0%; opacity: 1; } . This will target all divs inside

Hossein Over a year ago

Thanks but I need to choose them one each time, not in totally.

|

Kameron · Accepted Answer · 2022-03-21 13:50:06Z

1

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

edited Mar 21, 2022 at 13:50

Kameron

11k4 gold badges19 silver badges31 bronze badges

answered Mar 21, 2022 at 12:59

ymapex

111 bronze badge

Comments

Johnys · Accepted Answer · 2022-03-21 12:54:52Z

0

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.

answered Mar 21, 2022 at 12:54

Johnys

1357 bronze badges

Collectives™ on Stack Overflow

Unable to execute animation on hover using CSS

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related