懸停效果以顯示圖像

Question

有什麼方法可以懸停在TEXT上並顯示圖像。例如， 我的名字是美國廣播公司和我的國家在DGF，所以當有人懸停在美國廣播公司或DGF，一個圖像將被顯示。

類似於this但它不能在我的網頁上工作。

Answer 1

HTML

<div class="example"> 
    Hover over me 
    <img src="example.com"> 
</div> 

CSS

.example img { 
    display: none; 
} 
.example:hover img { 
    display: inline; 
} 

Answer 2

隱藏內部#show-img圖像通過默認，然後使用:hover psedo類改變顯示爲方框下面

#show-img { 
    color: red; 
    cursor: pointer; 
    position: relative; 
    text-transform: uppercase; 
} 

#show-img img{ 
    display: none; 
    position: absolute; 
    top: 10px; 
} 

#show-img:hover img { 
    display: block; 
} 

演示給出：Fiddle