CSS棘手的懸停效果

Question

每當我將鼠標懸停在圖像上時，如何顯示圖像或文字？你們能幫我嗎？

一個例子：

Answer 1

我用我自己的想法用它，並得到充分的滿足，你必須做出2個圖像，第一個非發短信和第二，你的文字和豪爾對他們.. ...試試看.....

<style type="text/css"> 
    .leftPan{width:200px; float:right;; margin-top:2px} 

    #c1 { 
    margin:6px; 
    border: thin solid black; 
    width: 200px; 
    height: 200px; 
    background: url(1.jpg) no-repeat; 
    display: inline-block; 
    } 
    #c1:hover { 
    background: url(2_photo.jpg) no-repeat; 
    } 

    </style> 

Answer 2

在a元素上使用背景圖像。

然後您可以控制它的使用CSS可見

a:hover { 
    background-image: url(url/to/img); 
} 

像這樣

HTML

<nav> 
    <a href="#Räätälöity-toimitus">Räätälöity-toimitus</a> 
    <img src="http://placehold.it/200x200&text=image" alt="Räätälöity toimitus" /> 
</nav> 

CSS

nav { 
    position: relative; 
    display: inline-block; 
} 
a { 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    text-align: center; 
    line-height: 7; 
} 
a:hover { 
    background-image: url(http://placehold.it/50x50/E8117F/E8117F/); 
    background-repeat: no-repeat; 
    background-position: top right; 
} 

http://jsfiddle.net/UpGKf/

Answer 3

這實際上並不複雜......使用與下面類似的HTML結構，只需更改懸停時跨度的顯示屬性即可。

http://jsfiddle.net/kkxfk/2/

<ul> 
    <li><a href="#">Link Title<span>Link Desc.</span></a></li> 
</ul> 

使用絕對定位來定位你想要它的跨度。 ul li a span { display：none; }

ul li a:hover span { 
    display: block; 
    position: absolute; 
}