自動將鏈接標題添加到div標籤裏

我想用jquery創建一個css工具提示。我的HTML代碼自動將鏈接標題添加到div標籤裏

<a class="tooltip" href="#" title="My ttitle">Link1</a>

應該像懸停

<a class="tooltip" href="#" title="My ttitle"><div class="classic">My title</div>Link1</a>

如何做到這一點使用jQuery的？

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    //prepend span tag 
    var title = $("this").attr("title"); 
    $(".tooltip").prepend("<div class='classic'>".$(this).attr("title")."</div>"); 

});

來源

2012-10-01 girish_327

能請得分享的HTML代碼。所以這會更容易回答 – Techie

在JavaScript中的串聯字符串，你應該使用+代替.;

$(".tooltip").prepend("<div class='classic'>" + $(this).attr("title") + "</div>");

另外請注意，你不應該在包裝你的代碼加上引號this對象和this指的是document對象不是你span元素。

來源

2012-10-01 14:32:50 undefined

感謝您的幫助。 –

-1

我最後的工作輸出爲

<html> 
     <title>ToolTips Example</title> 
     <style type="text/css"> 
     .tooltip { 
      border-bottom: 1px dotted #000000; color: #000000; outline: none; 
      text-decoration: none; 
      position: relative; 
     } 
     .tooltip div { 
      margin-left: -999em; 
      position: absolute; 
     } 
     .tooltip:hover div { 
      border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
      font-family: Calibri, Tahoma, Geneva, sans-serif; 
      position: absolute; left: 1em; top: 2em; z-index: 99; 
      margin-left: 0; width: 250px; 
     } 
     .tooltip:hover img { 
      border: 0; margin: -10px 0 0 -55px; 
      float: left; position: absolute; 
     } 
     .tooltip:hover em { 
      font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold; 
      display: block; padding: 0.2em 0 0.6em 0; 
     } 
     .classic { padding: 0.8em 1em; } 
     .custom { padding: 0.5em 0.8em 0.8em 2em; } 
     * html a:hover { background: transparent; } 
     .classic {background: #FFFFAA; border: 1px solid #FFAD33; } 
     .critical { background: #FFCCAA; border: 1px solid #FF3334; } 
     .help { background: #9FDAEE; border: 1px solid #2BB0D7; } 
     .info { background: #9FDAEE; border: 1px solid #2BB0D7; } 
     .warning { background: #FFFFAA; border: 1px solid #FFAD33; } 
     </style> 

<!-- jQuery --> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
     $(".tooltip").each(function(){ 
      $(this).prepend("<div class='classic'>" + $(this).attr("title") + "</div>"); 
     }); 
    }); 
</script>   
</head> 

<body> 
<a class="tooltip" href="#" title="Hello">Classic</a> 
<br /> 
<a class="tooltip" href="#" title="Second Example">Second Example</a> 
</body></html>

來源

2012-10-02 07:31:10

你不需要發佈你的最終結果在這裏的答案領域：P – l2aelba

但只顯示每個鏈接的第一個標題。 –

自動將鏈接標題添加到div標籤裏

回答

相關問題