无法使用 CSS 在悬停时执行动画

Question

我需要在将鼠标悬停在 <div> 上并使用 codeyad class (.codeyad) 后显示一些 <div> 框。

* {
  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>

问题出在以下部分：

div.codeyad:hover div.js{
  left: 0%;
  opacity: 1;
}

我需要在 class codeyad 悬停在 <div> 上后使用动画显示 <div> 和 class js，但它不执行！有人可以帮忙吗？

Answer 1

您需要修改您的 select 或如下所示。仅当您将鼠标悬停在 div.codeyad 上时，它才会 select class .js。了解 + - (Adjacent sibling combinators).

它将一直有效，直到您保持 HTML 结构不变。即 .codeyad 紧接着 .js

div.codeyad:hover + div.js {
  left: 0%;
  opacity: 1;
}

下面的工作代码（更新了注释）

* {
  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

使用此代码（提供的最后一个代码段），您可以使用 class“js”访问 div，它是 div class“codeyad”的子项

你在告诉 css 像这样的事情 =>

<div class="codeyad"> // on hover, do something with child class js
   <div class="js"></div>
</div>

我认为最简单的解决方案是使用 javascript，您可以在其中访问悬停功能。或者你也可以尝试使用 CSS，但这有点棘手，你必须知道 CSS 选择器。 Link 提供 here.

Answer 3

是的，您可以使用以下方法实现此目的：https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

使用时要记住的一点：它会工作“只有当它紧跟在第一个元素之后，并且两者都是同一父元素的子元素时”

因此，为了获得所需的结果，您可以这样做：

div.codeyad:hover+div.js {
  left: 0%;
  opacity: 1;
}

无法使用 CSS 在悬停时执行动画

Unable to execute animation on hover using CSS

html

css

hover