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“弹出标题”。我试过但我没有得到解决方案。任何人都帮助我...

Answer 1

实际上非常相似的问题已经解决here。你可以用js或额外添加的html元素来做到这一点。

Answer 2

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>

给出悬停标题文本的背景

2 个答案: