鼠标光标

Question

亲爱的社区有没有办法在光标悬停效果（css？）旁边做一个文本，就像在这个网站上一样？

http://manuelraeder.co.uk/

我用abbr和span风格尝试过，但它似乎不起作用。每张照片都应该改变文字。

提前致谢！

Answer 1

在您关联的网站上，他们似乎正在使用Javascript。我不认为有一种方法可以完全用CSS做到这一点。

当您将鼠标悬停在网站上的图片上时，会在body的末尾创建一个新的HTML标记：

<p class="tooltip" style="display: block; top: ...; left: ...;">TEXT</p>

其中top和left对应于光标所在的像素值，文本将是您要在光标旁边浮动的任何文本。

在Javascript中，您将为关联的图像创建hover观察者，并在触发器函数内创建新的p工具提示元素。您可以将p元素的文本设置为相应图片的alt标题。查看网站的Javascript，这就是他们为工具提示所做的事情：

$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').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('fast');
}, 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 })
});
});