HTML & CSS Bildübergänge mit Linkmaps

Question

Ich mache eine Sprachoption, sodass, wenn der Benutzer über einen Globus schwebt, die Flaggen von Norwegen und den USA erscheinen. Jede Flagge wird mit einer Seite in der jeweiligen Sprache verlinkt. Ich benutze Übergänge, so dass die Flags im Laufe einer Sekunde erscheinen.

Ich tat dies mit zwei Bildern; "top" enthält das Bild nur des Globus, und "bottom" enthält das Bild des Globus und zwei Flaggen an seiner Seite. Oben: Bewegen Sie die Deckkraft auf 0 und blenden Sie das untere Bild mit den Flaggen ein.

Ich habe versucht Ankerelemente mit absoluter Positionierung und ich habe auch versucht, Bildzuordnung, aber das gleiche Problem besteht weiter ... Wenn ich auf den Linkbereich schweben, bin ich nicht mehr über "top", also das Original Das Bild von nur dem Globus blendet sich wieder ein. Ich brauche es, damit "top", wenn ich über den Linkbereichen schwebe, immer noch eine Deckkraft von 0 hat. Ich versuche Javascript zu vermeiden, wenn es nur in just gemacht werden kann HTML & CSS, würde ich das bevorzugen. Gibt es eine Möglichkeit, die Deckkraft auf 0 zu halten, bis ich damit fertig bin, sowohl über "top" als auch über die Linkbereiche zu schweben? Vielen Dank. anstelle des img.top

.languageExpand { 
 
    position: absolute; 
 
    right: -2%; 
 
    bottom: 21px; 
 
    width: 250px; 
 
    height: 125px; 
 
    background-color: #000; 
 
} 
 

 
.languageExpand img { 
 
    position: absolute; 
 
    left: 0; 
 
    /*FADE EFFECT*/ 
 
    transition: opacity 1s ease-in-out; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    -o-transition: opacity 1s ease-in-out; 
 
} 
 

 
.languageExpand img.top { 
 
    z-index: 7; 
 
} 
 

 
.languageExpand img.bottom { 
 
    z-index: 3; 
 
} 
 

 
.languageExpand img.top:hover { 
 
    opacity: 0; 
 
} 
 

 
.languageExpand img.bottom:hover { 
 
    z-index: 5; 
 
} 
 

 
map { 
 
    z-index: 4; 
 
}

<div class="languageExpand"> 
 
    <img class="top" src="Images/languageBegin.png" usemap="#langMap" /> 
 
    <img class="bottom" src="Images/language.png" /> 
 
    <map name="langMap"> 
 
    <area shape = "rect" coords = "35,45,75,85" href = "indexNO.html" alt = "Norsk lenke"> 
 
    <area shape = "rect" coords = "175, 45, 215, 85" href = "index.htm" alt = "English link"> 
 
    <area shape = "rect" coords = "100,39,149,87" href = "index.htm" alt = "English link"> 
 
    </map> 
 
</div>

Answer 1

Sie könnten den Hover-Trigger-Arbeit mit Ihrem .languageExpand Behälter machen. Entfernen Sie Ihre CSS für .languageExpand img.top:hover und fügt:

.languageExpand:hover img.top { 
    opacity: 0; 
} 

Dann, wenn der gesamte Behälter schwebt über, wird das untere Bild immer in Sicht verblassen.