怎样实现把鼠标移到附件上出现下图效果?

请大神指导

6个回答

用onmouseenter 和onmouseleave可以实现,但是样式要自己调试,给你个例子:
[code="java"]





哈哈1








哈哈2


function show(obj) { var str=getIE(obj) var temp=str.split(",") var top=temp[0] var left=temp[1] var objDiv=document.getElementById("div1") objDiv.style.display=""; objDiv.style.left=temp[1]; objDiv.style.top=parseInt(temp[0])+parseInt(obj.offsetHeight); } function getIE(e){ var t=e.offsetTop; var l=e.offsetLeft; while(e=e.offsetParent){ t+=e.offsetTop; l+=e.offsetLeft; } return (t+","+l); } function hide(obj){ obj.style.display="none" } function hideDiv(obj) { var objDiv=document.getElementById(obj); objDiv.style.display="none"; } function showDiv(obj) { var objDiv=document.getElementById(obj); objDiv.style.display=""; }

[/code]

asdf3qwe
asdf3qwe 你好,我测试了上面的代码,挺好的,我想问一下,我用以下的代码去实现时,当我鼠标去触发onmouseover事件的时候,显示的隐藏的一个div,但是这个div会随我的鼠标移动,原因是我获取的是这个事件的x,y坐标,当我鼠标移动时,x,y是动态改变的,我没有想到当我触发onmouseover事件时怎样让那个div显示在一个固定的位置,比如这个事件的正上方,请问大神有什么好的解决方法么? function mouseOut(){ $("#showInfo").css("display","none"); } function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop}; } function mouseMove(ev){ var ev = event||window.event; var mouse = mousePosition(ev); $("#showInfo").css("display","block"); $("#showInfo").css("position","absolute"); $("#showInfo").css("left",mouse.x+"px"); $("#showInfo").css("top",mouse.y+"px"); } <span onmouseover='mouseMove(event)'>点击事件</span> <div id = "showInfo" style = "width:60px;background:yellow;display:none" onmouseout='mouseOut()' onmouseover='mouseMove(event)'> <a href="#" onclick="alert(1)" >下载</a> <a href="#" onclick="previw()" >预览</a> </div>
6 年多之前 回复

$("#showInfo").css("position","absolute");
$("#showInfo").css("left",mouse.x+"px");
$("#showInfo").css("top",mouse.y+"px");
}

横坐标:mouse.x换成 附件的left + 变动值,
纵坐标:mouse.y换成 附件的top + 变动值

可以使用tooltip插件,推荐一个Poshy Tip

用事件响应创建出div显示内容等...理念就这样

添加一个鼠标滑过的事件,然后控制隐藏显示div就可以了,找找jquery的例子吧 肯定能有
刚看个例子 地址是www.javajxw.com

楼主,使用javascript的onmouseover和onmouseout就可以实现这种效果了
例如:图片/按钮

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐