如何将翻转效果添加到地图上的文本

Question

好的，我有这张地图：

我需要为国家/地区名称添加翻转效果（这可以通过简单的方式完成：将鼠标悬停在CSS中）但我无法找到一种选择文本的一部分的好方法，所以如果我悬停＆＃34;欧洲＆＃34;它只是突出了欧洲而不是每一个字。

图像位于PSD中，因此我可以访问基本地图+图层。我怎么能接近这个？我正在考虑在HTML中添加所有文本并在CSS中设置样式（旋转，间距等），这需要很长时间，并且在适应不同分辨率时管理也会很痛苦。

你能掌握什么建议吗？谢谢:)）

图片供参考（文字为红色只是为了显示那里的东西，这将是翻转效果）：

Answer 1

这是一个想法：

＆＃13;

＆＃13;

body {
    position: relative;
}
img {
    width: 100%;
}
.states {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.map-container {
    width:960px;
    transform-origin: 0px 0px;
    transform: scale(0.8);
}

a.state-name {
    position:absolute;
}

a.state-name:hover {
    background-image: url("http://i.stack.imgur.com/aB42n.gif");
}
a#europe {
    background-position: -420px -140px;
    left: 420px;
    top: 140px;
    height: 45px;    
    width: 210px;
}

＆＃13;

<div class="map-container">
<img src="http://i.stack.imgur.com/319c9.gif" />
<img src="http://i.stack.imgur.com/aB42n.gif" class="states" />
<a id="europe" class="state-name" href="#"></a>
</div>

＆＃13;

＆＃13;

＆＃13;

注意：

• 您需要为每个国家/地区名称定义a标记和正确的css规则：background-position, width, height, left, top，例如#europe示例
• .map-container - 必须与原始图片960px
具有相同的宽度
• 如果需要调整地图大小，则需要使用JS或CSS转换属性来缩放整个.map-container，否则悬停元素将被放错地方。
• 注意css transform属性

  

这是一项实验性技术。由于此技术的规范尚未稳定，请检查兼容性表，以了解在各种浏览器中使用的正确前缀。另请注意，随着规范的更改，实验技术的语法和行为可能会在未来版本的浏览器中发生变化。