當滑鼠放在div中時顯示一個浮動div
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/jquery.js"></script>
<title>test1</title>
<style>
div {
height: 150px;
width: 400px;
margin: 10px;
border: 1px solid #0094ff;
}
</style>
<script>
$(function () {
$(".mydiv").mousemove(function (event) {
$("#showmsg").css({
display: "block",
left: event.clientX,
top: event.clientY-50,
}).html(this.innerHTML)
})
$(".mydiv").mouseout(function (event) {
$("#showmsg").css({
display:"none"
})
})
$("a").click(function (event) {
$("#showmsg").css({
display: "block",
left: event.clientX,
top: event.clientY+10,
}).html(this.innerHTML)
})
})
</script>
</head>
<body>
<a href="javascript:void(0)">檢視</a>
<div id="showmsg" class="mydiv" style="background:#ff0000;opacity:0.8;height:100px;width:200px;position:absolute;">div1</div>
<div class="mydiv">div2</div>
<div class="mydiv">div3</div>
<div class="mydiv">div4</div>
</body>
</html>
效果圖
