CODEWITHSUNDEEP
htmlcsshover
Hossein
Hossein

Reputation: 162

Unable to execute animation on hover using CSS

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?

Upvotes: 0

Views: 68

Answers (3)

Tushar Gupta
Tushar Gupta

Reputation: 15913

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>

Upvotes: 2

ymapex
ymapex

Reputation: 11

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

Upvotes: 1

Johnys
Johnys

Reputation: 135

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.

Upvotes: 0

Related Questions