html - working - css pseudo element




Wie bewege ich den Mauszeiger über ein untergeordnetes Element, ohne den Mauszeiger über das übergeordnete Element in CSS zu bewegen? (2)

Ist es möglich, den Mauszeiger über ein verschachteltes untergeordnetes Element zu halten, ohne einen Hover für das übergeordnete Element auszulösen?

Nein. Da beide Elemente das Schweben erfordern, können Sie das Kind nicht schweben lassen, ohne gleichzeitig den Elternteil zu bewegen.

Wenn das Verschachteln jedoch nicht unbedingt .child ist, können Sie das Element .child stattdessen zu einem Geschwister machen. Stellen Sie dann mit der absoluten Positionierung das "Kind" über das "Elternteil".

Durch das Entfernen des "untergeordneten Elements" aus dem Dokumentenfluss weiß das "übergeordnete Element" niemals, dass es existiert. Daher gibt es keine Hover-Assoziation zwischen Elementen.

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>

Ist es möglich, den Mauszeiger über ein verschachteltes untergeordnetes Element zu halten, ohne einen Hover für das übergeordnete Element auszulösen?

Im folgenden Beispiel sehen Sie, dass der Eltern-Hover-Effekt auch dann aktiv ist, wenn Sie den Mauszeiger über das Kind bewegen.

Ich möchte dies so ändern, dass beim Überfahren des untergeordneten Elements das übergeordnete Element in den Status "un-hovered" zurückkehrt.

Ist das mit CSS möglich?

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>


Grundsätzlich nein. In einer fernen Zukunft können Sie vielleicht etwas wie

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

(Siehe Gibt es einen CSS-Elternselektor? )

Aber im Moment brauchst du ein paar Tricks wie @ Michael_B's Antwort.

Alternativ können Sie auch JavaScript verwenden.





hover