html - texto - ¿Cómo se coloca el cursor sobre un elemento secundario sin pasar el cursor sobre el elemento primario en CSS?

modificar puntero css

Question

¿Es posible desplazarse sobre un elemento secundario anidado sin activar un elemento emergente en el elemento primario?

En el siguiente ejemplo, verá que al pasar el mouse sobre el elemento secundario, el efecto de desplazamiento padre también sigue activo.

Me gustaría cambiar esto para que, cuando coloque el puntero sobre el elemento secundario, el padre vuelva a su estado "desprotegido".

¿Es esto posible con CSS?

body {
  font-family: sans-serif;
}
div {
  padding: 1em;
  margin: 1em;
  border: 1px solid #ccc;
}
.close {
  display: none;
  float: right;
}
.parent:hover > .close {
  display: inline-block;
}
.child:hover > .close {
  display: inline-block;
}

<div class="parent">
  <a href="" class="close">Close parent</a>
  This is the parent
  <div class="child">
    <a href="" class="close">Close child</a>
    This is the child
  </div>
</div>

Answer 1

¿Es posible desplazarse sobre un elemento secundario anidado sin activar un elemento emergente en el elemento primario?

No. Debido a que ambos elementos requieren que se pase el ratón, no se puede ubicar al niño sin mover el mouse sobre él.

Sin embargo, si anidar no es esencial, puede hacer que el elemento .child un hermano. Luego, usando el posicionamiento absoluto, coloque el "niño" sobre el "padre".

Al eliminar el "niño" del flujo de documentos, el "padre" nunca sabe que existe. Por lo tanto, no hay asociación de vuelo entre los elementos.

body {
  font-family: sans-serif;
  position: relative;
}
.parent {
  height: 100px;
}
.child {
  position: absolute;
  width: 80%;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
}
div {
  padding: 1em;
  border: 1px solid #ccc;
}
.close {
  display: none;
  float: right;
}
.parent:hover > .close {
  display: inline-block;
}
.child:hover > .close {
  display: inline-block;
}

<div class="parent">
  <a href="" class="close">Close parent</a> This is the parent
</div>
<div class="child">
  <a href="" class="close">Close child</a> This is the child
</div>

Answer 2

Básicamente, no. En un futuro lejano, es posible que puedas usar algo como

:hover:not(:has( > :hover)) > .close {
  display: inline-block;
}

(ver ¿Hay un selector padre CSS? )

Pero actualmente necesitarás algunos trucos como la respuesta de @ Michael_B.

Alternativamente, considere usar JavaScript.