改变鼠标右击样式

最新推荐文章于 2022-12-24 09:10:19 发布

_Akui

最新推荐文章于 2022-12-24 09:10:19 发布

阅读量288

点赞数

分类专栏： js 文章标签：前端 js

本文链接：https://blog.csdn.net/Akui1997/article/details/89319739

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

改变鼠标右击样式

上一次我记录了下之前做过的简易留言板，本次就记录下点击鼠标右键改变样式；
下面是一段html+css样式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>改变鼠标右击样式</title>
	<style>
		.content{
			width: 120px;
			border:1px solid #ccc;
			display: none;
			position: absolute;
			background: #f2f2f2;
		}
		.item{
			font-size: 14px;
			height: 30px;
			line-height: 30px;
			padding-left: 10px;
			cursor: default;
		}
		.item:hover{
			background: rgba(206,147,216,0.8);
		}
	</style>
</head>
<body>
	<div class="content" id="content">
		<div class="item">返回</div>
		<div class="item">加载</div>
		<div class="item">另存为...</div>
		<div class="item">打印</div>
		<div class="item">查看网页源代码</div>
	</div>
</body>

html+css样式是比较简单的一部分接下来是js的部分：

<script>
	document.oncontextmenu=function(e){//鼠标右击事件
		var e =  e || event;//获取event对象
		var X = e.clientX;//鼠标距离窗口左边距离
		var Y = e.clientY;//鼠标距离窗口顶部距离
			content.style.display="block";//使div转变为块元素
			content.style.left=X+"px";
			content.style.top=Y+"px";//设置div的位置
		return false
	}
	document.onclick=function(){
		content.style.display="none";//单点击任意位置使div消失
	}
	</script>
</html>

我在做这个改变鼠标右击样式的时候也曾经遇到了一个不算问题的问题，不过对于新人来说也是一个比较容易忽略的问题，那就是千万不要忘记在css里加上定位，不然div是不会跟随鼠标移动的。