Puede haber una especie de efecto de borde en el zoom provocado por un píxel CSS que no es solo un píxel de pantalla sino 2 o más en pantallas modernas/de alta definición. Si el sistema está tratando de asignar varios píxeles de pantalla a uno de CSS y se le pide que haga una fracción, a veces puede 'dejar atrás' un píxel de pantalla. De ahí el blanco en ocasiones, y la variación en diferentes niveles de zoom.

En el caso de la pregunta, tal vez hacer un truco simple, haciendo que el elemento principal tenga un fondo azul al pasar el mouse, ¿sería suficiente?

 .Container1 .Container3:hover { text-decoration: none !important; cursor: pointer; background-color: blue; }

Cambié el tamaño del borde a 0.0125em. (¡Es raro pero funcionó!).

 .Container1 .Container3 { border: 0.0125em solid black; }

Inspirado en la respuesta de A Haworth : colorear el elemento principal en su lugar es menos propenso a generar artefactos cuando se trata de diferentes niveles de zoom/densidades de pantalla. Puede eliminar el fondo del elemento secundario y agregar un nuevo selector :hover para el elemento principal que solo se activa cuando no está en el estado .clicked .

 .HeaderContainer3:hover { color: white !important; /** Background removed here **/ } /** New block with a :not selector **/ .Container1 .Container3:hover:not(.clicked) { background-color: blue; }

Ejemplo de código de trabajo completo:

 $(document).ready(function () { document.getElementById("HeaderContainer").addEventListener("click", function (e) { if (e.target.id != "FormContainer") { document.getElementById("Container3").classList.toggle("clicked"); document.getElementById("HeaderContainer").classList.toggle("HeaderContainer3"); }; }); });

 .Container1 { background-color: white; line-height: 30px; font-size: 20px; color: black; border: none; position: absolute; } .Container1 h3 { font-size: 30px; color: #142D41; margin-top: 20px; margin-bottom: 10px; position: relative; } .Container1 .Container3 { padding: 30px; display: block; border: 1px solid black; border-radius: 5px; margin-top: 15px; font-size: 15px; min-width: 100%; background-color: white; text-align: left; height: 100px; overflow: hidden; } .Container1 .Container3:hover { text-decoration: none !important; cursor: pointer; } .Container1 .Container3:hover:not(.clicked) { background-color: blue; } .HeaderContainer3:hover { color: white !important; } .HeaderContainer2 { padding: 30px; } .HeaderContainer1 { z-index: 10; position: relative; margin: -31px; padding: 32px 30px 25px 30px; width: auto; } .FormContainer { font-size: 20px !important; } #Container3 { height: 0px; transition: height 300ms ease-in-out; box-shadow: 0.1px 0.6px 2px 0px #8c8c8c; } #Container3.clicked { height: 314px; } .Header { position: relative; padding-top: 6px; overflow: hidden; width: 100%; height: 100%; cursor: auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div id="Container1" class="Container1"> <h3>Title </h3> <div class="Container2"> <div id="Container3" class="Container3"> <div id="HeaderContainer" class="HeaderContainer1 HeaderContainer2 HeaderContainer3"> <div class="Header">Header</div> </div> <div id="FormContainer" class="FormContainer"> <hr /> <div style="padding: 5px 0px 8px 0px;"> Form </div> <br /> <div id="FormElementsContainer" class="FormElementsContainer"> <div> <b>First</b> <br /> </div> <div> <b>Last</b> <br /> </div> <div> <b>Third</b> <br /> </div> <div> <br /> <button> Submit </button> </div> </div> <br /> </div> </div> </div> </div>

Aquí hay una solución. Es similar a lo que sugirió otra persona, pero tiene en cuenta el estado .clicked .

La solución se reduce a establecer la propiedad background-color en el contenedor con propiedades de border y border-radius lugar de en el contenedor anidado. Lo logra reemplazando .HeaderContainer3:hover selector con .Container3:not(.clicked):hover .

 .Container3:not(.clicked):hover { color: white !important; background-color: blue; }

Violín de trabajo: https://jsfiddle.net/2eqLb6go/

En cuanto a por qué sucede esto, no tengo una respuesta técnica, pero parece tener algo que ver con la representación de píxeles fraccionarios con contenedores anidados cuando el padre tiene un border . Aquí hay una demostración del mismo problema en una forma simplificada:

https://jsfiddle.net/0vje6k5w/

Parece un problema de renderizado debido a un error de redondeo con border . Parece que el área de recorte y los anchos del borde se calculan de manera diferente, lo que da como resultado un espacio inconsistente de píxeles transparentes que se puede redondear a 0 o 1 . Se respeta el background del contenedor con la propiedad de border (de ahí la solución descrita anteriormente), pero todo lo que esté anidado dentro de él se recortará y no parece haber ninguna forma de evitar que eso suceda. Por ejemplo, el problema persiste incluso si los elementos secundarios están absolutamente posicionados dentro de él.

Honestamente, llamaría a esto una implementación con errores del modelo de caja con respecto al zoom de la página. Es extraño que todos los principales navegadores en 2021 sufran el mismo comportamiento.