带有链接映射的 HTML 和 CSS 图像转换答案

【问题标题】：HTML & CSS Image transitions with link maps带有链接映射的 HTML 和 CSS 图像转换
【发布时间】：2017-08-02 21:23:33
【问题描述】：

我正在制作一个语言选项，以便当用户将鼠标悬停在地球上时，会弹出挪威和美国的旗帜。每个标志将链接到相应语言的页面。我正在使用转换，以便标志在一秒钟内出现。

我通过使用两张图片来做到这一点； “顶部”仅包含地球的图像，“底部”包含地球的图像和旁边的两面旗帜。在顶部：悬停不透明度为 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>

【问题讨论】：

标签： html css css-transitions anchor transition

【解决方案1】：

您可以使用 .languageExpand 容器而不是 img.top 使悬停触发器工作。删除 .languageExpand img.top:hover 的 css 并添加：

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

然后当整个容器悬停在上面时，底部的图像总是会淡入视野。

【讨论】：

像魅力一样工作！非常感谢！！