Question

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

如果没有，有没有办法显示光标下的文字？

我只需要一个接近普通标题属性行为的东西，我只需要立即显示并使用我的styliong。

注意：我知道这种方式：

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

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

任何帮助将不胜感激

感谢名单!!

Answer 1

你可以在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

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

1 个答案: