Question

我希望我的鼠标悬停以使其淡出然后再出现，从而使“隐藏” div出现，并且当not（：hover）我希望它逐渐消失然后消失时，我已经尝试过：

.éléments:not(:hover) #hidding {
  font-size: 0;
  opacity: 0;
  transition: opacity 1s, font-size 2s 1s;
}

.éléments:hover #hidding {
  background-color: #97e6bc;
  width: 20em;
  margin: 0 auto;
  padding: 1em;
  transition: font-size 1s, opacity 2s 1s;
}

<div class="éléments">
  <div class="école">
    <h3>Where is Charly ?</h3>
  </div>
  <div id="hidding">
    <p>hidding</p>
  </div>
  <div class="école">
    <h3>Where is Charly ?</h3>
  </div>
  <div id="hidding">
    <p>hidding</p>
  </div>
  <div class="école">
    <h3>Where is Charly ?</h3>
  </div>
  <div id="hidding">
    <p>hidding</p>
  </div>
</div>

但是由于未知原因，div立即消失，只有文本似乎受:not(:hover)影响，有人可以解释一下发生了什么吗？

Answer 1

您的代码有很多问题，很多其他人都注意到了

首先，正如connexo所说，id必须是唯一。请改用class。
第二，正如Temani Afif所说，您不应使用é之类的特殊字符。这是一种错误的编码做法，可能会导致错误。
出于许多原因，.elements:not(:hover)并不是一个好主意。
请勿将background-color之类的无生命属性放入:hover伪类中。
您正在尝试为transition属性设置动画。这可能是您大多数故障的根源。

但重要的是，不存在.elements:not(:hover)的使用。看来您想要实现的只是.elements本身。我猜是暗示:not(:hover)。您应该将所有默认的CSS格式（包括所有转换）都放在.elements中。在悬停的Pseudo类中，仅将要设置动画的属性放在:hover上。 W3Schools: CSS Pseudo-classes

.elements .hidding {
  height: 0;
  width: 15em;
  opacity: 0;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #97e6bc;
  transition: opacity 1s, height 1s ease-out, width 1s ease-out;
}

.elements .hidding>p {
  display: block;
  padding: 1em;
  margin: 0;
}

.elements:hover>.ecole>.hidding {
  width: 20em;
  height: 3em;
  opacity: 1;
}

<div class="elements">
  <div class="ecole">
    <h3>Where is Charly ?</h3>
    <div class="hidding">
      <p>hidding</p>
    </div>
  </div>
  <div class="ecole">
    <h3>Where is Charly ?</h3>
    <div class="hidding">
      <p>hidding</p>
    </div>
  </div>
  <div class="ecole">
    <h3>Where is Charly ?</h3>
    <div class="hidding">
      <p>hidding</p>
    </div>
  </div>
</div>

我不会为transition属性设置动画（我什至不认为这是遥不可及的）。使用CSS animations.

可能会更好

Answer 2

您不能超过一个 <div id="hidding">。 id 必须始终保持唯一性。请改用<div class="hidding">。

https://www.w3schools.com/hTML/html_id.asp

话虽这么说，在开发中使用非ASCII字符是不好的做法。

我更正了这些问题。

问题的原因是，您拥有一些仅在:hover状态下定义的属性（width，padding，margin）和b）在transition的规则方面没有定义。

第二个问题是您的.element:not(:hover) .hidding实际上应该只是.elements .hidding。这样做的原因是，在.element:not(:hover) .hidding上悬停时，.elements中立即定义的任何内容都不再适用。

.elements .hidding {
  background-color: #97e6bc;
  font-size: 0;
  margin: 0 auto;
  opacity: 0;
  width: 20em;
  transition: all 1s;
}

.elements:hover .hidding {
  background-color: #97e6bc;
  font-size: 16px;
  opacity: 1;
  padding: 1em;
  transition: all 1s;
}

<div class="elements">
  <div class="ecole">
    <h3>Where is Charly ?</h3>
  </div>
  <div class="hidding">
    <p>hidding</p>
  </div>
  <div class="ecole">
    <h3>Where is Charly ?</h3>
  </div>
  <div class="hidding">
    <p>hidding</p>
  </div>
  <div class="ecole">
    <h3>Where is Charly ?</h3>
  </div>
  <div class="hidding">
    <p>hidding</p>
  </div>
</div>

Answer 3

它有效，但是您已经写了opacity 2s 1s;。这意味着在2秒钟的过渡中1秒钟后，不透明度开始为1。这不是正确的方法。请改用.elements #hidding{。然后.elements:hover #hidding{。这个问题是否充满了错误:)。在询问How to check if a program exists from a Bash script?

之前，请尝试更好地学习

CSS悬停工作，但不是（：hover）没有达到目的

3 个答案: