Ich arbeite an einem Menü, das auf der rechten Seite des Bildschirms erscheint. https://jsfiddle.net/grhajrbp/Bei Schwebeflug im verschachtelten div nicht funktionieren
Html:
<div id="east-exit">
<div id="mail-option">
<a ng-click="controller.openEmails()"><i class="communicate-icon mail fa fa-envelope"></i></a>
<a><i class="new-mail fa fa-plus-circle"></i></a>
</div>
<a><i class="communicate-icon fa fa-comments"></i></a>
<i class="east-exit-icon fa fa-arrow-right"></i>
<a><i class="communicate-icon fa fa-phone"></i></a>
<a><i class="communicate-icon fa fa-camera"></i></a>
</div>
CSS:
html {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
#east-exit {
display: flex;
opacity: 1;
z-index: -1;
align-items: stretch;
justify-content: space-around;
flex-direction: column;
position: absolute;
right: 0;
height: 100%;
width: 85px;
font-size: 55px;
}
#east-exit:hover .east-exit-icon {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-ms-transition: all .2s ease;
transition: all .2s ease;
opacity: 0;
}
#east-exit:hover .communicate-icon {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
opacity: 1;
}
#east-exit:hover,
#mail-option:hover,
.mail:hover .new-mail {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
opacity: 1;
}
.east-exit-icon {
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-ms-transition: all .2s ease;
transition: all .2s ease;
font-size: 45px;
opacity: 0.1;
}
.communicate-icon {
z-index: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
color: darkgrey;
opacity: 0;
}
.new-mail {
z-index: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
color: darkgrey;
opacity: 0;
}
.communicate-icon:hover,
.communicate-icon:focus,
.communicate-icon:active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
color: grey;
cursor: pointer;
}
Das Menü vier Tasten zeigt. Wenn ich den Mauszeiger über den Mail-Button halte, sollte sich neben dem Mail-Button ein kleiner Plus-Button befinden. Ich versuche derzeit nur, den Plus-Button beim Hover anzeigen zu lassen (es ist noch nicht an der richtigen Stelle. Ich kann den Plus-Button nicht beim Hovern der Mail-Taste anzeigen lassen. Weiß jemand, wie man das macht?
Außerdem habe ich auch versucht, den Button mit flexbox an die richtige Stelle zu bringen (die Bilder zeigen, wohin es gehen soll). Ich konnte das auch nicht funktionieren lassen. Hat jemand irgendwelche Vorschläge, die ich könnte versuchen Erstes Bild: Zweites Bild: Drittes Bild:
Denken Sie, Sie hätten dort kleinere Bilder verwenden können? –