如何只移動圖像的部分懸停

我有一個圖像，其中包含幾個字，當一個詞像「好」或永不懸停，我想要移動它。如何只移動圖像的部分懸停

對於一個像我知道該怎麼做：

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

，但我想移動特定的文字，如「好」。

在CSS中可能嗎？

謝謝！ ...

來源

2012-01-06 superscral

您可以將圖像剪切到這個詞，但對於多話，你就需要夾子多個圖像......擊敗目的。 – 2012-01-06 14:03:35

簡單...不是如果單詞在相同的圖像。爲每個單詞製作單獨的圖像。

來源

2012-01-06 14:01:41 zozo

如果我在幾張圖片中分開圖片，問題出在我的HTML頁面上，圖片之間有一些空行：s。 – superscral 2012-01-06 14:43:05

什麼黑線？打印了嗎？還有一些代碼？有了這個，我可以幫助你。 – zozo 2012-01-09 08:56:34

不，這是不可能的。您不能使用CSS將圖像的各個部分彼此分開。

您可能最好使用單獨的圖像或設置HTML中的文本。使用HTML文本，您可以做這樣的事情，例如像這樣：

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

然後

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

來源

2012-01-06 14:02:48

當我想顯示分隔圖像時，我在圖像之間有一個白色空白:( – superscral 2012-01-06 14:49:50

@superscral沒有理由發生這種情況。您是否設置了背景顏色？ – 2012-01-06 14:51:51

否bakground顏色集合我有這樣的： ' <表ID = 「Tableau_02」 WIDTH = 「520」 HEIGHT = 「50」 BORDER = 「0」 CELLPADDING = 「0」 CELLSPACING = 「0」> ' 和第1部分和part_21之間我有一個白線 – superscral 2012-01-06 15:03:34

你將不得不使用圖像作爲元素的背景和重新定位背景：

#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個像素。請注意，您需要考慮維度。

來源

2012-01-06 14:03:36 Raybiez

使用CSS精靈可能會解決你的問題：http://css-tricks.com/css-sprites/

來源

2012-01-06 14:54:59

是的，但我搜索我的圖像的css精靈的例子：$ – superscral 2012-01-06 15:12:31

如何只移動圖像的部分懸停

回答

相關問題