0

それは単純かもしれませんが、私は解決策を見つけられませんでした

私は次のコードを書きました。

<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カーソルをホバーしたときに「ポップアップのタイトル」を指定したいということです。試してみましたが、解決策が得られませんでした。誰か助けてください...

4

1 に答える 1

1

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>
于 2012-07-24T14:38:49.863 に答える