html - 为悬停标题文本提供背景

Question

可能很简单，但我没有找到解决方案

我写了以下代码。

<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在鼠标悬停时给出“弹出窗口的标题”。我试过但我没有得到解决方案。任何人都可以帮助我...

score 1 · Accepted Answer

Jquery“工具提示”是它的正确解决方案。这里有一些资源给你：

但如果你想自己做一个。使用时，jquery 尝试附加获取元素的标题属性，然后在事件悬停时将其附加到跨度。

<!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>

html - 为悬停标题文本提供背景

1 回答 1

Related

Reference