如何讓文字懸停？

Question

http://cdpn.io/jLAJg 有人可以教我如何讓文本出現在鼠標懸停在每張圖片上時？ （我只完成了Codecademy網絡基礎課程，我發佈的網站基本上就我所知的網頁編碼而言）

Answer 1

您可以將title屬性添加到您的元素。

<img src="something" alt="Hover to see the tooltip!" title="Tooltip!" /> 

Demo

如果你想要更多的自定義工具提示，您可以使用google search，你會發現很多好使用Javascript/jQuery的例子。

Answer 2

那麼，對於一件事，你可以使用title屬性的每個圖像上。這樣，當您將鼠標懸停在元素上時，將顯示具有給定文本的工具提示。

例子：

<img src="images/penguin.jpg" alt="Cute penguin"> 

Answer 3

你可以做這樣的事情，這是非常簡單的：

（我已經更新了codepen有多個盒子）

codePen - JSFiddle

HTML：

<div class="box"> 
    <a href="http://google.co.uk">Click Me!</a> 
</div> 

CSS：

.box{ 
    background:red; 
    width:100px; 
    height:100px; 
    position:relative; 
} 

.box:hover a{ 
    bottom:10px; 
    opacity:1; 
} 

a{ 
    transition:all .4s; 
    -webkit-transition:all .4s; 
    background:blue; 
    color:#fff; 
    position:absolute; 
    bottom:0; 
    left:0; 
    right:0; 
    text-align:center; 
    opacity:0; 
} 

它採用純CSS所以有不需要外部庫。

很明顯，你將不得不更改文本，但它會在同一時間多工作。