給予懸停標題文本的背景

可能是一個簡單但我沒有找到解決方案給予懸停標題文本的背景

我寫了下面的代碼。

<html> 
<head> 
<style> 
span.dropt { 
    border-bottom: thin dotted; 
    background:white; 
} 
</style> 
</head> 
<body> 
    <span class="dropt" title="Title for the pop-up">Hot Zone Text 
    </span> 
</body> 
</html>

在這裏，我想是的，我想給background color/image對「稱號彈出」懸停時的cursor.i嘗試，但我沒有得到任何solution.can一個幫助我.. 。

來源

2012-07-24 lucky

這是不可能的CSS。你最好找一個工具提示插件 – 2012-07-24 14:35:40

你不能簡單地使用html和css，你需要jquery來做到這一點 – 2012-07-24 14:35:45

Jquery「tooltip」是它的正確解決方案。這裏有一些資源給你：

但是，如果你想要做一個你的自我。使用，jQuery試圖附加獲取元素的title屬性，然後將其附加到事件懸停時的跨度。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.dropt').hover(function(){ 
     var title = $(this).attr('title'); 
     $(this).append('<span class="tooltip">'+title+'</span>'); 
    },function(){ 
     $('.tooltip',this).fadeOut('slow').remove(); 
    }); 
}); 
</script> 
<style> 
    .tooltip { 
     display:block; 
     padding:5px; 
     background:black; 
     color:white; 
     min-width:200px; 
     font-size:11px; 
     line-height:25px; 
     text-align:center; 
     position:absolute; 
     top:-50px; 
     border:none; 
     border-radius:5px; 
     -moz-border-radius:5px; 
     -webkit-border-radius:5px; 
    } 
    .dropt { 
     position:relative; 
     display:block; 
     cursor:pointer; 
    } 
</style> 
</head> 
<body> 
<br><br/> 
<span class="dropt" title="Title for the pop-up">Hot Zone Text</span> 
</body> 
</html>

來源

2012-07-24 14:38:49

你可以放置示例代碼 – lucky 2012-07-24 14:41:25

現在應該沒問題。對不起，這個長的代碼。 – 2012-07-24 14:57:54

對不起，我想使用工具提示插件，任何人都可以告訴我如何使用此工具提示插件懸停標題文本的背景 – lucky 2012-07-24 19:00:14

實際上非常類似的問題已經解決here。你可以用js或額外添加html元素來做到這一點。

來源

2012-07-24 14:40:46 simekadam

謝謝，這個鏈接對我有用 – lucky 2012-07-24 15:19:37

給予懸停標題文本的背景

回答

相關問題