在图像悬停时显示文本而不是光标

Display text instead of cursor on image hover

本文关键字：光标 文本 显示 图像 悬停      更新时间：2023-09-26

有人知道显示自定义文本而不是在图像悬停时显示光标的方法吗？理想情况下，这将是一个标题或alt属性形式的图像。

如果没有，有没有办法在光标下显示文本？

我只需要一个接近正常标题属性行为的东西，我只需要它立即显示，并使用我的风格。

注意：我知道这种方式：

 a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;...

不幸的是，它在图像后面显示标题，当光标移动时，我需要它在图像上：）

如有任何帮助，将不胜感激

thanx！！

您可以在jQuery中这样做：

var title = "";
$(document).mousemove(function (e) {    
    $(".image_container").each(function(i, v){
        var container = v;
        var img = $(this).children()[0];
        if((e.pageY < $(img).offset().top || 
           e.pageY > $(img).offset().top + $(img).height() ||
           e.pageX < $(img).offset().left ||
           e.pageX > $(img).offset().left + $(img).width()) ){
            if( $(container).children().length == 2){
               $(container).children()[0].title = $($(container).children()[1]).html();
               container.removeChild($(container).children()[1]);
            }
        }
        else{  
            if($(container).children().length == 1){
                console.log("printing title");
                title = $("<div class='img_title'>" + $(container).children()[0].title + "</div>");
                $(container).children()[0].title = "";
                $(container).append(title);
            }
            title.offset({
                top: (e.pageY ? e.pageY : e.clientX),
                left: (e.pageX ? e.pageX : e.clientY)
            });
        }
    });
});

和css

.img_title {
    display: table;
    background: #888888;
    position: absolute;
}
.image_container {
    cursor: none;
    display: table;    
}

并像这样放置图像：

<div class="image_container">
    <img src="url" title="Text to follow mouse on hover" />
</div>

点击此处查看：JSFiddle

相关文章：