帶鏈接地圖的HTML＆CSS圖像轉換

我正在製作語言選項，以便用戶在地球上懸停時，挪威和美國的國旗彈出。每個標誌將鏈接到相應語言的頁面。我正在使用轉換，以便標誌在一秒鐘內出現。帶鏈接地圖的HTML＆CSS圖像轉換

我通過使用兩個圖像做到了這一點; 「top」包含地球的圖像，「bottom」包含地球的圖像和兩側的標誌。在頂部：將不透明度褪色爲0，顯示帶有旗幟的底部圖像。

我已經試過絕對定位錨元素，我也試着圖像映射，但同樣的問題仍然存在......當我將鼠標懸停在鏈接區域，我不再懸停在「頂」，所以原來的只有地球的圖像淡入。我需要它，所以當我在鏈接區域上空盤旋時，「頂部」仍然具有0的不透明度。我試圖避免使用JavaScript，因此如果它可以在正好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>

來源

2017-08-02 lazarbrad

你可以使用你的.languageExpand容器代替img.top的做出懸停觸發的工作。刪除你的CSS爲.languageExpand img.top:hover，並添加：

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

然後當整個容器上空盤旋，底部的圖像將始終淡出眼簾。

來源

2017-08-02 21:31:01 arbuthnott

工程就像一個魅力！非常感謝你！！ – lazarbrad

帶鏈接地圖的HTML＆CSS圖像轉換

回答

相關問題