如何仅使用悬停移动图像的一部分

Question

我有一张包含多个单词的图片， 当一个像“好”或永远不会悬停的词时，我想移动它。

对于一张图片，我知道如何做到这一点：

#imgHover:hover { margin-top: -5px; }
<img id="imgHover" src="http://www.phrases.org.uk/images/most-common-words-in-english-proverbs-1.gif"/>

但我想只移动某些词，比如“好”。

可以在CSS中使用吗？

谢谢！ ...

Answer 1

要简单......如果单词在同一图像中则不行。为每个单词制作单独的图像。

Answer 2

不，这是不可能的。您无法使用CSS将图像的各个部分彼此分开。

您可能最好使用单独的图像，或在HTML中设置文本。使用HTML文本，您可以执行以下操作，例如：像这样：

<span class="word">Hi this is <span class="move">good</span></span>

然后

span.word span.move:hover { position: relative; top: -15px }

Answer 3

您必须将图像用作元素的背景并重新定位背景：

#img
{
  background:url("img.png") no-repeat 0 0;
  width:123px;
  height:10px;
}

#img:hover
{
  background-position:0 -5px;
}

您的HTML应如下所示：

<div id="img"></div>

将鼠标悬停在div上会将背景向上移动5个像素。请注意，您需要考虑尺寸。

Answer 4

使用CSS sprites可能会解决您的问题：http://css-tricks.com/css-sprites/