HTML & CSS 图像转换与 link 贴图

Question

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

我用两张图片做到了这一点； "top" 仅包含地球图像，"bottom" 包含地球图像和旁边的两面旗帜。在 top:hover 上，不透明度逐渐变为 0，显示带有标志的底部图像。

我尝试过使用绝对定位的锚元素，我也尝试过图像映射，但同样的问题仍然存在...当我悬停在 link 区域时，我不再悬停在 "top," 所以只有地球的原始图像淡入。我需要它，这样当我悬停在 link 区域时，"top" 的不透明度仍然为 0。我正在尝试避免使用 javascript，所以如果它可以在 HTML 和 CSS 中完成，我更愿意这样做。有什么方法可以将不透明度保持为 0，直到我将鼠标悬停在 "top" 和 link 区域上？谢谢。

.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

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

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

然后当整个容器悬停时，底部图像将始终淡入视野。

HTML & CSS 图像转换与 link 贴图

HTML & CSS Image transitions with link maps

html

css

anchor

transition

css-transitions