Mit dem Mauszeiger über das Element wird das zweite Element angezeigt. Wie halte ich das zweite Element sichtbar, nachdem ich vom ersten weggefahren bin?

Question

Ich versuche, ein Dropdown-Menü in HTML/CSS mit <a> Elemente zu erstellen. Bisher habe ich es geschafft, die sekundäre <a> (die, wenn die erste <a> ist nicht schwebend, erscheint nicht/ist ausgeblendet). Das ist ein großer Erfolg für mich, aber mein Problem ist, dass, wenn ich nicht länger die erste <a> schweben, die zweite verschwindet, die es unmöglich macht, auf die sekundäre <a> klicken.

Wie mache ich es so lange wie ich den zweiten <a> schwebe?

body { 
 
    background-color: rgb(245, 245, 220); 
 
} 
 
.dropdownbutton { 
 
    display: block; 
 
    width: 236px; 
 
    height: 35px; 
 
    background-color: #8B6969; 
 
    text-align: center; 
 
    font-family: Verdana; 
 
    line-height: 33px; 
 
    -webkit-transition-duration: 0.4s; 
 
    transition-duration: 0.4s; 
 
} 
 
.dropalt1 { 
 
    display: none; 
 
    width: 236px; 
 
    height: 35px; 
 
    background-color: white; 
 
    text-align: center; 
 
    font-family: Verdana; 
 
    line-height: 33px; 
 
    -webkit-transition-duration: 0.2s; 
 
    transition-duration: 0.2s; 
 
} 
 
.dropdownbutton:hover + .dropalt1 { 
 
    display: block; 
 
} 
 
a:link { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
a:visited { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
a:active { 
 
    color: white; 
 
    text-decoration: none; 
 
    background-color: rgb(128, 128, 128); 
 
} 
 
a:hover { 
 
    color: white; 
 
    text-decoration: none; 
 
    background-color: rgb(128, 128, 128); 
 
}

<a class="dropdownbutton" href="#">Click me!</a> 
 
<a class="dropalt1" href="#">Link 1</a>

Answer 1

sollten Sie in Elemente Verwendung von Verpackungs machen aussehen. Wenn zum Beispiel der übergeordnete Wrapper von (beider Elemente) über den Mauszeiger gezogen wird, sollten Sie das Element von Interesse anzeigen (das den Elternteil erweitern wird).

Und nur wenn Sie den Elternteil verlassen, wird das Zielobjekt ausgeblendet.

.hidden-child { 
    display: none; 
} 

.parent:hover .hidden-child { 
    display: block; 
} 

Sehr rudimentary example

Answer 2

Sie diesen Stil hinzufügen können den zweiten Anker zu zwingen, sichtbar zu bleiben, während sie schwebte ist:

.dropalt1:hover { 
    display: block; 
} 

Fiddle

Answer 3

Alles, was Sie tun müssen, ist .dropalt1:hover hinzufügen und es Block anzeigen lassen, so dass es bei Hover sichtbar bleibt.

Fügen Sie diese auf Ihre CSS-Datei:

.dropalt1:hover { 
    display: block; 
}