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

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

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>

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

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