2017-12-31 59 views
0

Ich wollte einen Effekt auf ein Element Hover platzieren. Aber ich kann es scheinbar nicht funktionieren lassen. die HTML-Struktur und CSS in einem aktuellen Projekt Im Folgenden sindHover Übergang auf dem Display funktioniert nicht

<!-- HTML ELEMENT STRUCTURE --> 
<div class="do-share"> 
    <ul class="social-container"> 
     <li>one</li> 
     <li>two</li> 
     <li>three</li> 
    </ul> 
</div> 

Dies ist die CSS

/* CSS file */ 
.do-share:hover > .social-container{ 
    opacity: 1; 
    display: block; 
    position: absolute; 
    right: 0; 
    list-style: none; 
    margin: 0; 
    top: -85px; 
} 
.social-container { 
    display: none; 
    opacity: 0; 
    transition: all 2s linear; 
} 

Aber der Übergang Wirkung auf das nicht funktioniert. Nicht sicher, was ich falsch mache

+0

Sie haben im HTML-Code, den Sie gepostet haben, keine Klasse "social-container", nur im CSS. – ecg8

+0

Entschuldigung, es ist ein Tippfehler, es sollte Tippfehler sein. Meine Frage –

+0

wurde aktualisiert. Anstatt display: none und block zu verwenden, benutze die Sichtbarkeit: versteckt und sichtbar. Solange Ihre Anzeige auf "None" gesetzt ist, wird kein Element zum Überfahren der Maus angezeigt, um den Hover-Effekt zu starten. Willst du wirklich alles mit Hover umstellen (d. H. Position und Listen-Stil sowie Sichtbarkeit)? – ecg8

Antwort

1

versuchen diese

.do-share:hover > .social-container{ 
 
    opacity: 1; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    list-style: none; 
 
    margin: 0; 
 
    top: 5px; 
 
} 
 
.social-container { 
 
    display: none; 
 
    opacity: 0; 
 
    transition: all 2s linear; 
 

 
} 
 
.do-share{ 
 
    min-height: 100px; 
 
}
<div class="do-share"> 
 
    <ul class="social-container"> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
</div>

0

versuchen Sie es mit einer Undurchsichtigkeit:

<html> 

    <body> 
    <div class="do-share"> 
     <ul class="social-container"> 
     <li>one</li> 
     <li>two</li> 
     <li>three</li> 
     </ul> 
    </div> 
    </body> 

</html> 

und CSS-Code:

body { 
    color: #fff; 
} 

.do-share:hover .social-container { 
    opacity: 0; 
    transition: all 5s linear; 
} 

.social-container { 
    opacity: 1; 
    list-style: none; 
    margin: 0; 
    top: 5px; 
    position: absolute; 
    left: 0; 
} 

.do-share { 
    min-height: 100px; 
} 
Verwandte Themen