Css hover work, but not(:hover) don't do its purpose

Question

I would like my hover to make the "hidding" div appear by fading in and then appearing, and when not(:hover) I want it to fade out and then disappear, I've tried this:

.é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>

But for an unknown reason the div instantly disappears and only the text seems affected by the :not(:hover), can someone explain me what is happening please?

Answer 1

It works but you have written opacity 2s 1s;. This means opacity starts to be 1 after 1 seconds in 2 seconds of transition. This is not the correct way. Use .elements #hidding{ instead. Then .elements:hover #hidding{. This question if full of wrongs :). Try to learn better before asking jsfiddle.net/90v2yLq8

Answer 2

There are multiple problems with your code, as noticed by many others:

• Firstly, as connexo said, ids must be unique. Use class instead.
• Secondly, as Temani Afif said, you shouldn't use special charactors like é. It's a bad coding practice that may cause errors.
• The .elements:not(:hover) isn't a good idea for many reasons.
• Don't put inanimate properties, like background-color, into a :hover Pseudo class.
• You're trying to animate the transition property. This might be the source of most of your glitches.

But importantly, the use of .elements:not(:hover) is nonexistent. It seemes what you are trying to achieve is just .elements itself. The :not(:hover) is implied I guess. You should put all your default css formatting in .elements itself, including all your transitions. Put only properties you want to animate on :hover in the hover Pseudo class. 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>

I wouldn't animate the transition property, (I don't even think it's remotely possible). You might have better luck with CSS animations.

Answer 3

You cannot have more than one <div id="hidding">. id must be unique at all times. Use <div class="hidding"> instead.

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

That being said, it is bad practice to use non-ascii characters in development.

I corrected these issues.

The cause of your problem is that you have some properties which a) are only defined in :hover state (width, padding, margin) and b) which are not defined when it comes to your rules for transition.

The second issue is that your .element:not(:hover) .hidding really should simply just be .elements .hidding. The reason for this is that anything that is defined in .element:not(:hover) .hidding immediately is no longer applied at all when hovering .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>