鼠标聚焦则显示浮框事件
html:
<!--组件鼠标悬停出现浮框--> <div id="mydes" class="mydes"> <div id="mydes-span" class="mydes-span"></div> </div>
js:
des为想要传入的内容,你可以去掉,直接在html里写,也可以向我这样做成动态的。
function show(des) {
var e = window.event || arguments.callee.caller.arguments[0]
var objDiv = $("#mydes");
$("#mydes-span").html(des);
$(objDiv).css("display","block");
$(objDiv).css("left", e.clientX);
$(objDiv).css("top", e.clientY + 10);
console.info(event)
/*$(objDiv).css("left", "260px");
$(objDiv).css("top", "80px");*/
}
function hidediv() {
var objDiv = $("#mydes");
$(objDiv).css("display", "none");
$("#mydes").hide;
}
<a onMouseOver="javascript:show(\'{5}\');" onMouseOut="javascript:hidediv()">
css
#mydes{
position:absolute;
display:none;
border:1px solid silver;
background:white;
width: 15%;
height: 64px;
text-align: center;
border-radius:1em;
}
#mydes-span{
margin-top:8px;
}