リンクでマウス ホバー イベントを使用しています。Java スクリプト コードの 2 つのバージョンがありますが、最初のバージョンが機能していません。ホバー イベントは発生しません。しかし、それが起動する2番目のバージョン。最初のバージョンが機能しない理由がわかりません。
コードは次のとおりです。
<script type="text/javascript">
/* http://www.alessioatzeni.com/wp-content/tutorials/jquery/simple-tooltip/index.html */
/* this is the first version
$(document).load(
function()
{
// Tooltip only Text
$(".popupTooltip").hover(
function()
{
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
},
function()
{
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}
).mousemove(
function(e)
{
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
}
);
}
);
*/
$(document).load(
$(".popupTooltip").hover(
function()
{
// Hover over code
var title = $('.popupTooltip').attr('title');
$('.popupTooltip').data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
},
function()
{
// Hover out code
$('.popupTooltip').attr('title', $('.popupTooltip').data('tipText'));
$('.tooltip').remove();
}
).mousemove(
function(event)
{
var mousex = event.pageX + 20; //Get X coordinates
var mousey = event.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
}
)
);
</script>
最初のバージョンはコメント付きブロックです。www.alessioatzeni.com からコードをコピーします。
html 部分は次のとおりです。
<li>
<img src=\"$strImageLoc\" alt=\"Image\" width=\"210\">
<div class=\"one-fourth-image-shadow\"></div>
<h5>
$row[title]
</h5>
<a href=\"#\" class=\"popupTooltip\" title=\"$row[description]\">
More info...
</a>
</li>
マウスを「More info...」に合わせると、ポップアップが表示されます。