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

我有一个图像包含几个词， 当像“好”或“永远”这样的词悬停时，我想移动它

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

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

#imgHover:hover{margin top:-5px；}

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

在CSS中可能吗

谢谢！

---

…

简单地说。。。如果单词在同一个图像中，则不会。为每个单词制作单独的图像。

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

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

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

---

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

#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个像素。请注意，您需要考虑尺寸。

使用CSS精灵可能会解决您的问题：

您可以将图像剪辑到单词，但对于多个单词，您需要剪辑多个图像。。。如果我把图像分成几个图像，问题是在我的HTML页面中，图像之间有一些空行：s。什么黑线？有指纹吗？还有一些代码？这样我可能会帮助您。当我想显示分离图像时，图像之间有一个白色空白：（@superstral）没有发生这种情况的原因。你有背景颜色集吗？没有背景颜色集我有：

和介于两者之间第1部分和第21部分我有一个白色的line@super这可能来自表格的背景。你应该需要那个表格吗？如果我必须分离图像，然后显示所有图像，是的。或者哪个div和css最大，可能。。。

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