类似title的鼠标跟随事件

Posted on 2016-10-10 15:25  武奘  阅读(348)  评论(0编辑  收藏  举报
$(document).ready(function(){
// 创建一个div显示提示信息
var dropTitle = document.createElement("div");
dropTitle.id= "backdropTitle";
dropTitle.style.backgroundColor="#fff";
dropTitle.innerHTML="要显示的内容";
document.getElementsByTagName('body')[0].appendChild(dropTitle);

// 鼠标移入遮罩层事件
var backdropTitle = document.getElementById("backdropTitle");
var backdropBorderS = document.getElementsByClassName("backdrop-border");
backdropTitle.style.display = "none";
for(var i=0,len=backdropBorderS.length;i<len;i++){
backdropBorderS[i].onmousemove = function(evt) {
var oEvent = evt || window.event;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
backdropTitle.style.display = "block";
backdropTitle.style.position = "absolute";
backdropTitle.style.left = oEvent.clientX + scrollleft + 10 + "px";
backdropTitle.style.top = oEvent.clientY + scrolltop + 10 + "px";
backdropTitle.style.zIndex = "2060";
setTimeout(function(){
backdropTitle.style.display = "none";
},6000);
};
backdropBorderS[i].onmouseout = function (){
backdropTitle.style.display = "none";
}
}
$(".backdrop-border").each(function(){
$(this).parent().siblings().css("background-color","#ddd");
$(this).parent().siblings().find("h4").find("a").css("color","#888");
})
});


Copyright © 2024 武奘
Powered by .NET 8.0 on Kubernetes