CSS 当鼠标悬停在不同的不同位置时，图像上的不同文本框

Question

我需要制作一张地图的图像，当鼠标悬停在某个位置时，地图上会出现一个文本框。当鼠标悬停在另一个位置时，不同的文本框将不得不出现在地图的不同部分。

---------------------------
| box 1             box 2 |
|           MAP           |
|                         |
| hover2           hover1 |
---------------------------

说当鼠标悬停在hover1上时，框1会出现。当鼠标悬停在hover2上时，会出现方框2

我可以让用户 css 执行 hover1 -> box1，但我无法执行 hover2 -> box 2。我可以单独使用 CSS 获得结果吗？

html:

<h1>World Map</h1>
<div class="map">
  <img src="assets/strangemap.png" usemap="#testing">
  <div>
    <map name="testing">
      <area shape="rect" coords="554,275,600,316" class="overlay">
    </map>
    <span class="text-content-left"><span>Midgaard</span></span>
  </div>
</div>

css:

.map {
  display: inline-block;
  position: relative;
  border-top: 3px solid $gray-lighter;
  border-left: 3px solid $gray-lighter;
  border-bottom: 3px solid $gray-light;
  border-right: 3px solid $gray-light;
}

.overlay {
  cursor: pointer;
}

span.text-content-left {
  background: rgba(0,0,0,0.5);
  color: white;
  display: table;
  height: 50px;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100px;
  opacity: 0;
  border: 2px solid $gray-light;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

span.text-content-left span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.map map:hover + span.text-content-left {
  opacity: 1;
}

Answer 1

听起来您想创建一个包含上下文相关悬停区域的图像地图。

这些可能非常复杂，但这里有一个您可能会觉得有用的插件：

http://www.outsharked.com/ImageMapster/default.aspx?demos.html#usa

Answer 2

哇！已找到解决方案！

html:

<h1>World Map</h1>
<div class="map">
  <img src="assets/strangemap.png" usemap="#worldmap">
  <div>
    <map name="worldmap">
      <area shape="rect" coords="505,244,546,278" class="target" data-title="Text Box 1">
      <area shape="rect" coords="481,189,503,207" class="target" data-title="Text Box 2">
      <area shape="rect" coords="452,273,479,293" class="target" data-title="Text Box 3">
    </map>
  </div>
</div>

css:

area[data-title]:hover:after {
  content: attr(data-title);
  background: rgba(0,0,0,0.5);
  color: white;
  opacity: 1;
  height: 50px;
  width: 150px;
  position: absolute;
  text-align: center;
  padding-top: 14px;
  left: 0;
  top: 0;
}

现在将鼠标悬停在这些坐标上将显示相应的文本框。

CSS 当鼠标悬停在不同的不同位置时，图像上的不同文本框

CSS Different text box over image when hover at different different location

html

css

hover