如果我有我的鼠標在圖像上顯示它的文本

Question

我怎樣才能像的風格標題所以它顯示的標題是這樣的：http://s28.postimg.org/qd6ic020d/hover.png 感謝每一個答案

Answer 1

這些被稱爲提示。 你可以查找很多這些類型的插件。

例如

• http://foundation.zurb.com/docs/components/tooltips.html
• http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
• 和許多許多！

谷歌是你的朋友在這裏。

許多需要JS，但有可能只是通過CSS來做到這一點：

例如

• http://www.menucool.com/tooltip/css-tooltip
• http://www.cssportal.com/css-tooltip-generator/
• 和許多許多

Answer 2

你可以試試這個

HTML

<a href="#" title="Hello world!">Hello</a> 

CSS

a { 
    color: #900; 
    text-decoration: none; 
} 

a:hover { 
    color: red; 
    position: relative; 
} 

a[title]:hover:after { 
    content: attr(title); 
    padding: 4px 8px; 
    color: #333; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    white-space: nowrap; 
    z-index: 20px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222; 
    -webkit-box-shadow: 0px 0px 4px #222; 
    box-shadow: 0px 0px 4px #222; 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); 
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 
} 

Answer 3

您可以使用popover從bootstrap

這裏是如何

$(document).ready(function() { 
 

 

 

 
    $('[data-toggle="popover"]').popover({ 
 
    trigger: "hover" 
 
    }); 
 

 

 
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <h3>Popover Example</h3> 
 
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">hover here. Toggle popover</a> 
 
</div>

更新：您可以定位popover當這樣懸停時

//Top 
    <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a> 

    //bottom 
    <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a> 

    //left 
    <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a> 

    //right 
    <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>