2016-04-20 14 views
0

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: Closed east-menu Zweites Bild: Opened east-menu Drittes Bild: This is where the plus button should go

+0

Denken Sie, Sie hätten dort kleinere Bilder verwenden können? –

Antwort

0

Sie können die folgende CSS-Regel verwenden

.communicate-icon.fa.fa-envelope:hover { 
    background: url(<image name>); 
    background-repeat: no-repeat; 
    background-position: -40px 0; // Change as needed 
} 

Sie müssen auch Ihr div breiter machen oder das Hintergrundbild wird nicht angezeigt.

Verwandte Themen