HTMLとCSSリンクマップを使用した画像の遷移

Question

私は、ユーザーが地球上を飛ぶと、ノルウェーとアメリカのフラグがポップアップするように言語オプションを作成しています。各フラグはそれぞれの言語のページにリンクします。私はトランジションを使って、フラグが1秒間に現れるようにしています。

これは2つの画像を使用して行いました。 「トップ」には地球儀だけの画像が含まれ、「ボトム」には地球儀の画像とその側面にある2つのフラグが含まれています。上に：不透明度フェードを0に移動し、下の画像をフラグで表示します。

絶対配置でアンカー要素を試してみましたが、イメージマッピングも試しましたが、同じ問題が続きます...リンク領域にマウスカーソルを合わせると、「上」にはじかれなくなりました私はそれが必要なので、私はリンクの領域上にぶらぶられているので、 "トップ"はまだ0の不透明度があります。私はジャバスクリプトを使用することを避けようとしているので、ちょうどHTML & CSS、私はそれを好むだろう。私は "トップ"とリンクの両方の領域をホバリングするまで、不透明度を0に保つ方法はありますか？ありがとう。

.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

代わりimg.topのご.languageExpandコンテナを使用してホバートリガ作品を作ることができます。 .languageExpand img.top:hoverのためにあなたのCSSを削除し、追加します。

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

、容器全体がホバーされたときに続いて、下の画像は、常に視界にフェードインします。