Question

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

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

当鼠标悬停在hover1上时，框1将显示。当鼠标悬停在hover2上时，将出现第2个框。

我能够用css来做hover1 - ＆gt; box1，但我无法做hover2 - ＆gt;方框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在图像上的不同文本框

2 个答案: